react.js React.UseEffect 仅在页面加载时呈现一次，但在 prop 更改时不呈现

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 */]);