React向组件传参时props从object变为undefined如何解决？

1. React异步批处理导致的状态不同步：你代码中先执行dispatch(setIsAdd(true))打开弹窗，再执行setItemEdit(item)赋值，React18的自动批处理机制会把这两个状态更新合并执行，大概率会出现弹窗已经开始渲染，但itemEdit还没完成更新的情况。第一次渲染时可能因为状态更新顺序巧合拿到有效值，后续渲染就会出现空值。
2. 上层传递的item参数本身为undefined：如果列表渲染时某个item项本身是undefined，或者API刷新列表时旧item被清空，点击编辑时传入handleEdit的参数就会是undefined，最终导致传递给弹窗的props为undefined。
3. 状态未正确重置：关闭弹窗时如果没有同步重置itemEdit，下一次打开弹窗时可能会先拿到上一次的旧值，或者父组件意外卸载重置导致状态异常。

• 在handleEdit函数内打印传入的item参数，确认每次调用时入参是否为有效值，排除上层列表数据问题：

const handleEdit = (item) => {
  console.log('handleEdit接收的item:', item) // 新增此行排查
  dispatch(setIsAdd(true))
  setItemEdit(item)
};

如果此处打印的item为undefined，说明问题出在列表渲染时的item传递，需要排查列表数据源和循环渲染逻辑。

• 在父组件渲染弹窗的位置前打印itemEdit和store.isAdd，确认传递给弹窗的props本身是否正确：

console.log('父组件传递的itemEdit:', itemEdit, '弹窗开关状态:', store.isAdd) // 新增此行排查
{store.isAdd && <ModalAddClass itemEdit={itemEdit} />}

如果此处打印的itemEdit已经是undefined，说明问题出在父组件的状态维护，和弹窗组件无关。

• 检查关闭弹窗的逻辑，是否有地方意外调用了setItemEdit(undefined)，或者父组件被意外卸载导致state被重置。

• 调整状态更新顺序，先赋值itemEdit再打开弹窗，减少批处理导致的不同步概率：

const handleEdit = (item) => {
  setItemEdit(item) // 先赋值
  dispatch(setIsAdd(true)) // 再打开弹窗
};

• 给弹窗渲染增加有效值判断，只有itemEdit存在时才渲染组件，避免空值传递：

{store.isAdd && itemEdit && <ModalAddClass itemEdit={itemEdit} />}

• 关闭弹窗时同步重置itemEdit为初始值，避免遗留旧值干扰下一次渲染：

// 弹窗关闭回调示例
const handleModalClose = () => {
  dispatch(setIsAdd(false))
  setItemEdit(null) // 同步重置编辑项
}

• 兜底方案：如果依然存在批处理导致的不同步，可以用flushSync强制同步更新状态：

import { flushSync } from 'react-dom'

const handleEdit = (item) => {
  flushSync(() => {
    setItemEdit(item)
  })
  dispatch(setIsAdd(true))
};

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