向子组件传递Props后DOM未更新问题求助

嘿，我之前也踩过这个坑！这种子组件没跟着父组件数组更新的情况，大多和React的状态更新机制、组件复用规则有关，咱们一步步拆解解决：

1. 先检查父组件的数组更新方式是否符合React的不可变性原则 #

React是通过引用变化来检测状态更新的，如果直接修改原数组或者数组里的对象，React会认为状态没变化，自然不会触发子组件更新。

错误示例（直接修改原数组/对象）： #

// 直接修改数组元素，引用没变化，React检测不到
const updateSegment = (index, newFieldValue) => {
  no_of_segments[index].field = newFieldValue;
  setNoOfSegments(no_of_segments); // 没用，因为数组引用还是原来的
};

正确示例（创建新的数组/对象引用）： #

// 先拷贝原数组，再修改元素，最后返回新数组
const updateSegment = (index, newFieldValue) => {
  const updatedSegments = no_of_segments.map((seg, idx) => {
    if (idx === index) {
      // 拷贝原对象，修改后返回新对象
      return {...seg, field: newFieldValue};
    }
    return seg;
  });
  setNoOfSegments(updatedSegments); // 新引用触发状态更新
};

或者用扩展运算符简化：

const updateSegment = (index, newFieldValue) => {
  const newSegments = [...no_of_segments];
  newSegments[index] = {...newSegments[index], field: newFieldValue};
  setNoOfSegments(newSegments);
};

2. 确认子组件的key值是否正确设置 #

父组件渲染多个子组件时，key是React识别组件唯一性的关键。如果key重复或者用数组索引当key（当数组元素增删/顺序变化时），React会错误地复用旧组件，导致DOM不更新。

错误示例（用索引当key）： #

{no_of_segments.map((item, index) => (
  <FormSubComponent key={index} rs={item} />
))}

正确示例（用对象的唯一标识当key）： #

// 假设每个segment对象有唯一的id字段
{no_of_segments.map((item) => (
  <FormSubComponent key={item.id} rs={item} />
))}

3. 检查子组件是否错误地将props存在内部状态中 #

如果子组件把父组件传的rs存在自己的useState里，但没有监听rs的变化，就会导致props更新后，子组件状态没同步，DOM自然不更新。

错误示例（未同步props到状态）： #

const FormSubComponent = ({ rs }) => {
  // 只在初始化时赋值，props更新后不会触发状态变化
  const [formValue, setFormValue] = useState(rs);
  
  return <input value={formValue} onChange={(e) => setFormValue(e.target.value)} />;
};

正确处理方式： #

要么直接用props渲染（推荐，因为父组件已经管理状态了）：

const FormSubComponent = ({ rs, onUpdate }) => {
  return <input value={rs.field} onChange={(e) => onUpdate(e.target.value)} />;
};

如果必须存在子组件状态，就要用useEffect监听props变化：

const FormSubComponent = ({ rs }) => {
  const [formValue, setFormValue] = useState(rs.field);
  
  // 当rs变化时，同步更新子组件状态
  useEffect(() => {
    setFormValue(rs.field);
  }, [rs]);
  
  return <input value={formValue} onChange={(e) => setFormValue(e.target.value)} />;
};

4. 排查是否使用了React.memo导致浅比较未通过 #

如果子组件用了React.memo做性能优化，React会对props做浅比较。如果父组件传递的rs是同一个对象引用（即使内容变了），浅比较会认为props没变化，子组件就不会更新。

解决办法： #

要么保证每次传递的rs是新的对象引用（参考第一点的正确写法），要么给React.memo传自定义的比较函数：

const FormSubComponent = React.memo(({ rs }) => {
  // 渲染逻辑
}, (prevProps, nextProps) => {
  // 自定义比较逻辑：比较对象的内容而不是引用
  return JSON.stringify(prevProps.rs) === JSON.stringify(nextProps.rs);
});

⚠️ 注意：复杂对象用JSON.stringify比较会有性能开销，尽量还是通过更新引用的方式解决。

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