React Hook 下setState的回调

背景: React 的hook出现了已经很长一段时间了,最近着手想把以前的reacrt16.5.0的代码换成hook的写法
Hook以前的写法:
     ex:

   getDataInfo(dataId) {
      this.set({
         dataId: dataId
      }, ()=>{
             setDatainfo(dataId);
      })
   }
  setDatainfo (dataId) {
       .....xxxxxx
  }

原以为直接

function getDataInfo(props) {
   const [dataId, setDataId] = useState(‘‘);
   setDataId(dataId, ()=>{setDataInfo(dataId)});
}

然后报错了,不支持第二个参数;
在react官方git上搜罗了一下解决方案
https://github.com/facebook/react/issues/14174

Abramov 大神居然也回了,没必要使用的第二个参数,虽然各路大神都贴出了解决方案,但是跟着Abramov的思路应该没问题的;
忽然想到了useEffect;
于是动手开始实验:

       useEffect(()=>{
           setDataInfo(dataId);
        },[dataId]);

好简单的说.

原文地址:https://www.cnblogs.com/Evan666Blog/p/10696660.html

时间: 2024-10-14 09:26:32

React Hook 下setState的回调的相关文章

从 0 到 1 实现 React 系列 —— 4.setState优化和ref的实现

看源码一个痛处是会陷进理不顺主干的困局中,本系列文章在实现一个 (x)react 的同时理顺 React 框架的主干内容(JSX/虚拟DOM/组件/生命周期/diff算法/setState/ref/...) 从 0 到 1 实现 React 系列 -- JSX 和 Virtual DOM 从 0 到 1 实现 React 系列 -- 组件和 state|props 从 0 到 1 实现 React 系列 -- 生命周期和 diff 算法 从 0 到 1 实现 React 系列 -- 优化 set

react的this.setState中的坑

react的this.setState中的有两个. 1.this.setState异步的,不能用同步的思维讨论问题 2.在进行组件通讯的回调的时候,this指向子组件,没有指向父亲这,怎么办呢.在 class gradingView extends React.Component { constructor(...args) { super(...args); this.state = { suffixIcon: <Icon type="up" />, popDivShow

[React] Detect user activity with a custom useIdle React Hook

If the user hasn't used your application for a few minutes, you may want to log them out of the application automatically in case they've stepped away from the machine and someone nefarious attempts to use their session. Let's checkout how you can cr

react框架下,在页面内加载显示PDF文件,关于react-pdf-js的使用注意事项

react框架下,在页面内加载显示PDF文件,关于react-pdf-js的使用注意事项 之前做了一个需求,在注册账号的时候,让用户同意服务条款, 服务条款是一个PDF文件, 这就需要在react内加载PDF文件的插件了,今天特地做一个总结 我用的版本是4.0.1 然后在页面内引入 import PDF from 'react-pdf-js'; 然后在需要的地方直接使用标签就行了 page参数是加载的PDF的第几页,可以通过更改page的数字完成翻页的功能 原本的想法是加载所有页,然后用户滚动条

深入了解react中 this.setState方法

setState(arg1,arg2) 括号内的arg1可传入两种参数,一种是对象,一种是函数. arg2为更改state之后的回调方法,arg2可为空. 对象式的setState用法 //第一种 this.setState({ isAuthenticated: true}); this.setState({ isAuthenticated: true},()=>{}); this.setState( {isAuthenticated: true}, () => console.log(thi

React Hook

一.描述 Effect Hook 可以让你能够在 Function 组件中执行副作用(side effects): import { useState, useEffect } from 'react'; function Example() { const [count, setCount] = useState(0); // Similar to componentDidMount and componentDidUpdate: // 类似于 componentDidMount 和 Comp

react的this.setState详细介绍

this.setState是react类组件中最常用的一个react API,使用它可以改变state从而改变页面.今天我们就来详细的学习一下这个东西.比如: import React, { Component } from react; export default class Test extends Component { constructor() { super() this.state = { count: 0, } } render() { return ( <div> 您的点击

react hook的todolist

感觉好长时间没写博客一样,app.js代码 import React from 'react'; import { useState } from 'react'; function App() { const [input, setInput] = useState(''); // const [inputList, setInputList] = useState([]); // let submitData=()=>{ let arr=[] arr.push({ value:input }

解决react不能往setState中传key作为参数的办法

有时候我们需要每次单独设置众多state中的一个,但是,都是进行相同的操作,这时候如果每个值都要单独写一个相同的函数的话,违背了don't repeat yourself的原则,并给日后的维护埋下了极大的隐患. 这时我们就会想向上抽取,把每次不同的key传递给这个函数,就像下面这样: this.state = { visibleA: false, visibleB: false, visibleC: false, } <button onClick = {this.handleClick.bin