如何使React组件在props.statePassDown变更时触发React.useEffect重新执行以更新组件？

这是React开发中很常见的钩子使用误区，我来帮你梳理一下问题所在和解决办法！

问题根源 #

你的React.useEffect钩子的依赖数组是空的[]，这就告诉React：这个副作用只需要在组件首次挂载时执行一次，后续不管组件的props或者state怎么变化，都不要再触发这个副作用了。所以哪怕props.statePassDown已经更新，useEffect里的异步请求也不会重新执行，chatRooms状态自然不会跟着更新。

修改方案 #

只需要把props.statePassDown加入到useEffect的依赖数组中，让React监听这个props的变化，一旦它更新就重新执行副作用里的异步请求。另外，为了避免组件卸载后异步请求还完成并调用setChatRooms导致的内存泄漏警告，我们可以加一个挂载状态的判断。

修改后的完整代码 #

export default function ChatMessages(props) {
  const [chatRooms, setChatRooms] = React.useState([]);
  
  React.useEffect(() => {
    // 标记组件是否挂载
    let isMounted = true;
    
    const fetchMessages = async () => {
      try {
        const messages = await GetMessages(props.statePassDown);
        console.log(messages);
        // 只有组件还挂载时才更新状态
        if (isMounted) {
          setChatRooms(messages);
        }
      } catch (error) {
        // 这里可以添加错误处理，比如提示用户获取失败
        console.error('获取消息失败:', error);
      }
    };
    
    fetchMessages();
    
    // 组件卸载时标记为未挂载
    return () => {
      isMounted = false;
    };
  }, [props.statePassDown]); // 这里加入props.statePassDown作为依赖

  return (
    <div className="mainChatView"> {/* 注意：React里要用className，不是class */}
      <div>{props.statePassDown}</div>
      {chatRooms.map((chatRoom, index) => {
        return (
          <ul key={index}> {/* 把key放到ul上更合适，避免多余的DOM层级 */}
            <li>
              <table>
                <tr>
                  <td>
                    chatID: {chatRoom.chatID}
                    <br />
                    message: {chatRoom.message}
                  </td>
                </tr>
              </table>
            </li>
          </ul>
        );
      })}
    </div>
  );
}

额外注意点 #

1. 关于className：我顺便把你代码里的class改成了className，这是React的规范，JSX里要用className来定义CSS类名。
2. key的位置：把key属性放到<ul>标签上会更合理，因为map返回的每个元素都应该有唯一的key，避免React的重渲染警告。
3. 依赖稳定性：如果props.statePassDown是一个对象或者数组，要确保父组件传递它时是稳定的（比如用useMemo缓存），否则父组件每次渲染都会生成新的引用，导致useEffect频繁触发。
4. 错误处理：我在异步函数里加了try/catch，这样如果GetMessages请求失败，你可以捕获错误并做相应处理，避免页面崩溃。

内容的提问来源于stack exchange，提问作者innom