React状态更新问题求助：更新对象状态后父组件重渲染但子组件未重渲染

别担心，React新手遇到这种情况太常见了，我们一步步来排查和解决：

1. 先检查列表渲染时是否正确返回了子组件 #

你当前的map写法用了大括号{}但没有显式return子组件，这会导致map实际返回的是undefined——父组件根本没渲染出子组件，自然不会有重渲染的触发。修复方法很简单：

• 去掉大括号，用箭头函数的隐式返回：

<> 
  { obj.b.map((data,i)=> <ChildComponent greetings={data}/>) } 
</>

• 或者在大括号里加上return关键字：

<> 
  { obj.b.map((data,i)=>{ 
      return <ChildComponent greetings={data}/> 
  }) } 
</>

2. 给列表项添加唯一的key属性 #

React依赖key来识别列表中每个元素的身份变化，如果缺少key，React可能无法正确检测到子组件的props变化，从而跳过重渲染。建议给每个ChildComponent加上唯一的key：

<> 
  { obj.b.map((data,i)=> (
      <ChildComponent 
          key={data}  {/* 如果data值唯一，优先用data作为key */}
          greetings={data}
      />
  )) } 
</>

如果你的data可能重复，也可以用索引i作为key，但注意索引作为key只适合列表不增删、不排序的场景，否则可能引发其他渲染异常。

3. 确认子组件没有不必要的优化阻止重渲染 #

如果你的ChildComponent使用了React.memo（函数组件）或者是PureComponent（类组件），需要确认传递的props确实发生了变化。不过你这里greetings从'hello'/'bye'变成了'hi'/'good'，属于基本类型的明确变化，正常情况下memo/PureComponent应该会触发重渲染。如果还是有问题，可以检查子组件内部是否依赖了其他外部状态，或者memo的自定义比较函数是否写了错误的逻辑。

先从第一点开始排查，这是新手最容易犯的细节错误，修复后应该就能看到子组件随状态更新正常重渲染了。

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