useEffect as Callback for useState 依赖太多答案

【问题标题】：useEffect as Callback for useState has too many dependenciesuseEffect as Callback for useState 依赖太多
【发布时间】：2020-07-30 17:19:37
【问题描述】：

我正在使用 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'。要么包含它，要么移除依赖数组

【问题讨论】：

你试过useEffect(() => { ... }, [A])或useEffect(() => { ... }, [A, B])吗？我不确定这些变量到底代表什么。无论哪种方式，您都应该粘贴 real 代码以避免 XY 问题。
@谢谢我尝试只在 useCallback [A] 中包含一个依赖项 - A - 但问题是我得到：React Hook useCallback has a missing dependency: 'B '。要么包含它，要么移除依赖数组

标签： javascript reactjs react-hooks

【解决方案1】：

不妨试试

}, [A])

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

// eslint-disable-next-line

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

【讨论】：

【解决方案2】：

useEffect 由两个参数组成

效果：可以返回清理函数的命令式函数；

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

获得有关 Visual Studio Code 提示的此信息

所以如果你想只在“A”改变时激活效果，你应该把“A”放在deps上。

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

【讨论】：

但是呢：React Hook useCallback 缺少依赖项：'B'。要么包含它，要么移除依赖数组

【解决方案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此时没有任何功能，不需要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)
  })
}

【讨论】：