Question

我正在用React Hooks重新编写类组件（因为它更干净），但是遇到了问题。在我的类组件中，我有一个this.setState({B: "blah blah blah"}, () => {//do some function with state A})的回调函数，因此每次状态x更改时，我都会将新的状态值与状态B结合使用。当我尝试像这样用React Hooks实现相同的功能时：

useEffect(() => {
    // Use state A with state B in function
   myFunction();
}, [myFunction])

const myFunction = useCallback(() => {console.log(`${A} and ${B}`}, [A, B]);

我只希望我的函数在状态A更改时运行-而不是状态B ...但是现在它会在状态A或状态B呈现的任何时间重新渲染。

我尝试只在useCallback [A]中包括一个依赖项-A-，但是问题出在这里：React Hook useCallback有一个缺少的依赖项：'B'。包括它或删除依赖项数组

Answer 1

也许尝试使用

}, [A])

作为唯一的依赖项，在函数末尾使用这样的注释：

// eslint-disable-next-line

这将禁用缺少的依赖关系，并为您提供所需的结果。通常对我有用。

Answer 2

useState允许您将函数发送到其参数中，例如cb，此cb始终需要返回新状态以进行渲染示例：

setState((state) => {
    /** 'state' in this moment represent the state without changes */
    /** You can do all that you need with 'state' */
    console.log(state)
    /** */
    return (newState)
  })

useEffect目前没有任何功能，y useCallback不是必需的

如果您有handleChange函数，那么我可以举一个例子，说明您的状态包含个人数据：

const [person, setPerson] useState({name: '', lastName: ''})

const handleChange = (newPerson) => {
  setPerson((person) => {
    /** 'person' in this moment represent the state without changes */
    /** You can do all that you need with 'person' */
    console.log(person)
    /** */
    return (newPerson)
  })
}

Answer 3

useEffect由两个参数组成

effect：一个命令函数，可以返回清除函数；

deps：如果存在，则仅当列表中的值更改时，效果才会激活。

在Visual Studio代码提示中获得此信息

因此，如果您只想在“ A”更改时才激活效果，则应将“ A”置于deps上。

useEffect(() => {}, [A]);

useEffect作为useState的回调依赖项过多

3 个答案: