为啥回调中的 React useState 依赖项为空？

Posted 2023-02-22

【中文标题】为啥回调中的 React useState 依赖项为空？

【英文标题】：Why is React useState dependency empty in callback?为什么回调中的 React useState 依赖项为空？

【发布时间】：2021-01-14 12:55:17

【问题描述】：

useCallback 中使用的依赖项以 null 的形式出现，即使它是在 useCallback 之外调用它时填充的。我什至尝试删除 useCallback 并在常规函数中使用 data 变量。它仍然为空。知道为什么会这样吗？

const [data, setData] = useState(null);

useEffect(() =>  //on page load
  const data = fetchData();
  setData(data)
, []);

const func = useCallback(async (payload) => 
    console.debug(data); //null
    if (data) //call api with payload
, [data]);

console.debug(data); //correct population of data

return <MyComponent onSubmit=func /> //passed to and called from second child down from here

【问题讨论】：

data = fetchData() 是异步函数吗？

获取她的一个很好的例子（通过钩子或类组件）：reactjs.org/docs/faq-ajax.html

是的。这只是数据来源的快速演示。每次页面刷新时都存在正确的数据。它在 func() 中使用时不可用

所以当一切都发生在同一个组件中时，这是有效的。但是当我将函数传递给子 Modal 并从那里调用它时，它调用 func() 没有问题。但此时data 对func() 不可用。我看到了一些关于 forwardRefs 的 Hooks 错误，但我真的不明白为什么/如何使用这些错误（即使是文档）或者这是否会有所不同。我还尝试将data 传递给子模态，然后将其直接传递回func(payload, data) 以查看它是否会以这种方式捕获它。还是没有运气。

【参考方案1】：

这样做

将数据作为 useState 中的参数传递给函数。没关系，我没有数据。所以我使用了 'abc'。

useEffect(() =>  //on page load
 const data = 'abc';
 setData(data)
 func(data)
  , []);

下一步将数据作为函数中的参数。

 const func = (data) => 
     console.log(data); //now it will have abc
 ;

【讨论】：

是的，这基本上就是我所做的。但我将func() 的主要部分移动到具有属性的子组件，以允许来自父级的额外回调

【参考方案2】：

我能让它在所有情况下都能正常工作的唯一方法是将func() 向下移动到孩子...使用它的地方。并且因为data 用于父级和子级，所以我将它传递给子级，并在运行func() 后将对其的任何修改推回父级，因此修改后的data 可能是父级中的set() .