在useImperativeHandle中的状态不具有持久性

Question

假设我处于这种状态：

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

并将其放入 useImperativeHandle 中，如下所示：

useImperativeHandle(ref, () => ({
   data,
}));

当我使用 useEffect 来跟踪状态是否像这样改变时：

useEffect(() => {
   console.log(componentRef.current.data);
}, [componentRef.current.data])

它不起作用，只有当我手动检查它时，就像有一个按钮 onClick 它将打印出来，否则它不是有状态的。为什么会这样？还有其他方法可以让它发挥作用吗？或者是将状态转移到父级的唯一方法？

Answer 1

useEffect 不是反应式的。它不跟踪事物。它只是比较渲染之间的依赖关系，如果有差异，它就会执行给定的回调。具有 useEffect 的组件应该重新渲染才能执行该功能。

您可以做的是将回调从父级传递给子级，以便子级在更改状态时可以调用它