React函数组件State更新触发重渲染但DOM未同步更新问题求助

排查与解决思路 #

• 1. 修正processData的返回值逻辑

React的state更新依赖引用变化触发更新，若processData直接修改原rawData对象的属性后返回原对象，即使数据内容变了，引用地址没变也可能导致渲染异常。需要每次返回全新的对象：
错误写法示例：

function processData(raw, opts) {
  // 直接修改原对象，引用不变
  raw.attr = opts.attr
  raw.list.forEach(item => item.flag = opts.attr)
  return raw
}

正确写法（浅层修改用扩展运算符，深层修改推荐用immer库）：

function processData(raw, opts) {
  // 返回全新对象，引用发生变化
  return {
    ...raw,
    attr: opts.attr,
    list: raw.list.map(item => ({
      ...item,
      flag: opts.attr
    }))
  }
}

• 2. 排查子组件实现逻辑

如果已经确认父组件data state更新、子组件也收到了新的data props但DOM没更新，基本都是子组件内部逻辑问题：

1. 子组件将props赋值给了内部state但未同步更新：很多人会把传入的data直接作为子组件内部state的初始值，但是只在组件挂载时赋值一次，后续props变化不会同步更新内部state。需要新增useEffect监听data变化同步更新：

const Child = ({data}) => {
  const [childData, setChildData] = useState(data)
  // 新增这段逻辑同步props变化
  useEffect(() => {
    setChildData(data)
  }, [data])

  return <div>{childData.attr}</div>
}

2. 子组件用了非受控模式：如果子组件渲染的是输入框等表单元素，用了defaultValue而非受控的value属性，defaultValue只会在首次渲染生效，后续props变化不会更新DOM，换成受控模式绑定value即可。
3. 子组件用了React.memo但浅比较不生效：如果子组件用React.memo做了性能优化，默认只会对props做浅层比较，若data是深层对象，浅层比较识别不到深层属性变化，要么给React.memo传入自定义比较函数，要么保证data更新时引用一定变化。

• 3. 快速定位问题的调试方案

在父组件return前添加日志console.log('父组件最新data', data)，子组件函数开头添加日志console.log('子组件收到props', data)，子组件return前打印渲染用的具体属性值，确认每一步的数据是否符合预期，快速定位是数据更新问题还是渲染逻辑问题。

内容的提问来源于stack exchange，提问作者Vivekraj K R