每次道具更改時，我都試圖更新我的組件：
export default function ChatMessages(props) {
const [chatRooms, setChatRooms] = React.useState([]);
React.useEffect(() => {
(async () => {
var x = await GetMessages(props.statePassDown);
console.log(x);
setChatRooms(x);
})();
}, []);
return (
<div class="mainChatView">
<div>{props.statePassDown}</div>
{chatRooms.map((chatRoom, index) => {
return (
<ul>
<li key={index}>
<table>
<tr>
<td>
chatID: {chatRoom.chatID}
<br></br>
message: {chatRoom.message}
</td>
</tr>
</table>
</li>
</ul>
);
})}
</div>
);
}
但不幸的是，這段代碼只被呼叫過一次。我可以看到道具通過這個 div 發生變化：
<div>{props.statePassDown}</div>
每次在另一個組件內按下按鈕時，都會重新渲染此行，但整個映射功能不是。
如何更改我的代碼以回應 中的更改props.statePassDown？
uj5u.com熱心網友回復：
您明確地將效果設定為沒有依賴項：
React.useEffect(()=>{
// ...
}, []); // <-- empty dependencies
這意味著它只會在組件安裝時執行。（如果不傳遞任何依賴陣列，則效果在每次組件更新后執行。）
更改依賴項以在這些值更改時執行效果。
React.useEffect(()=>{
// ...
}, [props.statePassDown]);
uj5u.com熱心網友回復：
export default function ChatMessages(props) {
const [chatRooms, setChatRooms] = React.useState([]);
React.useEffect(()=>{
(async () => {
var x = await GetMessages(props.statePassDown)
console.log(x)
setChatRooms(x)
})()
},[props.statePassDown]) // pass what you are trying to watch change
...
// ... here in the dependency array
uj5u.com熱心網友回復：
此外，關于 useEffect 鉤子的一件好事是 useEffect 鉤子內的 return 陳述句將在組件未卸載生命周期時觸發。前任。
useEffect(() => {
// ... on component mount
return () => {
// ... component did unmount
}
}, [/* dependency array */]);
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/353994.html
標籤：javascript 反应
上一篇：在匹配查詢的陣列中迭代物件的屬性
下一篇：如何用正則運算式替換所有出現的