react.js react.UseEffect只在页面加载时渲染一次，但在道具更改时不会渲染

Question

每次道具更改时，我都会尝试更新我的组件：

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中的更改？

Answer 1

您明确地将效果设置为没有依赖项：

React.useEffect(()=>{
// ...
}, []);  // <-- empty dependencies

这意味着它只能在组件装载时执行。(如果你没有传递任何依赖数组，那么效果会在每次组件更新后执行。(

更改依赖项，以便在这些值更改时执行效果。

React.useEffect(()=>{
// ...
}, [props.statePassDown]);

Answer 2

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

Answer 3

此外，关于useEffect挂钩，值得注意的一点是，useEffect钩子内部的return语句将在组件卸载生命周期时触发。例如

useEffect(() => {
// ... on component mount
return () => {
// ... component did unmount 
}
}, [/* dependency array */]);