useEffect作为useState的回调有太多依赖项

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

useEffect由两个参数组成

effect：一个命令式函数，可以返回一个cleanup函数；

deps：如果存在，只有当列表中的值发生变化时，效果才会激活。

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

因此，如果你只想在"；A"；改变，你应该把"；A"；在deps。

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

Answer 3

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此时没有任何功能，yuseCallback不是必需的

如果你有一个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)
})
}