传递状态后React子组件未更新问题求助

• 核心问题：子组件仅在挂载阶段用props.dataItem初始化内部状态，后续props更新时未同步更新状态。你能console.log到props，但状态没更新，就是因为初始化的state不会自动跟随props变化。

• 两种解决办法：

  1. 直接使用props渲染：如果子组件只是展示数据，不需要修改内部状态，直接用props.dataItem渲染即可，省去维护state的步骤：

     // 详情组件示例
     function Detail(props) {
       return (
         <div>
           <h3>{props.dataItem.name}</h3>
           <p>{props.dataItem.description}</p>
         </div>
       );
     }
     

  2. 用useEffect监听props更新状态：如果子组件需要维护独立状态，添加useEffect监听props.dataItem的变化，同步更新内部state：

     import { useState, useEffect } from 'react';
     
     function Detail(props) {
       const [item, setItem] = useState(props.dataItem);
     
       useEffect(() => {
         // 当props.dataItem变化时，更新内部状态
         setItem(props.dataItem);
       }, [props.dataItem]); // 依赖数组中加入props.dataItem
     
       return (
         <div>
           <h3>{item.name}</h3>
           <p>{item.description}</p>
         </div>
       );
     }
     

• 额外检查：父组件更新dataItem时，确保是新的引用。如果dataItem是对象/数组，更新时要创建新的实例，比如：

  // 父组件中更新dataItem的正确方式
  setSelectedItem({ ...newSelectedItem });
  // 数组则用 [...newArray]
  

  避免直接修改原对象/数组，否则React无法检测到变化，不会触发子组件重新渲染。

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