在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 的元件應該重新渲染才能執行該功能。

您可以做的是將回調從父級傳遞給子級，以便子級在更改狀態時可以呼叫它