Der verwendete ZustandImperativeHandle ist nicht dauerhaft

Question

Angenommen, ich befinde mich in dieser Situation:

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

und stecke es hinein useImperativeHandle so:

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

Wenn ich useEffect verwende, um zu verfolgen, ob sich der Status wie folgt ändert:

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

Es funktioniert nicht, nur wenn ich es manuell überprüfe, als ob es eine Schaltfläche gäbe onClick wird es gedruckt, andernfalls ist es nicht zustandsbehaftet. Warum passiert das? Gibt es eine andere Möglichkeit, es zum Laufen zu bringen? Oder ist es die einzige Möglichkeit, den Status auf das übergeordnete Element zu übertragen?

Answer 1

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

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