如何將更新數據發送到子組件。 反應

Question

如果我有一個 object 鍵值，我們假設由於某些輸入而發生變化。 如何更新獲取這些值並顯示它們的子組件。 當我將值作為道具發送給子組件時，它們顯然不會更新並保持為 tempData 中設置的初始值。 那么如何提示子道具重新發送或更新呢？

我已經有函數可以獲取數據並將其全部放入 tempData object 中的位置。 我是否通過在 Object 中設置數據來解決這個問題？

 const Parent = () => { const tempData = { location: "", weather: "", temperature: "", }; return ( <> <System onChange={(value) => urlHandler(value)} /> <City onChange={(value) => setCity(value)} /> <Data location={tempData.location} weather={tempData.location} temperature={tempData.temperature} /> </> }; const Child = (props) => { return( <> <div>location: {props.location}</div> <div>temperature: {props.temperature}</div> </> ) };

Answer 1

React 無法檢測到您已tempData ，因此它不會使用新數據重新渲染元素。

將數據存儲在state中。 使用 state API 更新 state 將觸發重新渲染。

這在React 教程中有所介紹，但重點關注舊式 class 組件。 現代代碼將在 function 組件中使用useState掛鈎。 MDN React 教程也涵蓋了這一點。