React Modal渲染前状态未更新报错：无法读取null的surname属性

你的问题根源很明确：modalData的初始值是null，而Modal渲染时会直接尝试访问modalData.surname——当modalData还未被赋值（或者状态更新的异步特性导致Modal先于数据更新渲染），就会触发Cannot read properties of null的错误。

这里提供几种简单有效的解决方式：

1. 给Modal内容加条件渲染 #

在Modal内部，先判断modalData是否存在，再渲染相关内容：

import Modal from '@mui/material/Modal';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';

// ... 其他代码

<Modal open={open} onClose={() => {
  setOpen(false);
  setModalData(null); // 关闭时重置数据，避免下次打开显示旧内容
}}>
  <Box sx={{ padding: 2, maxWidth: 400, margin: 'auto', marginTop: '10%', backgroundColor: 'white' }}>
    {/* 先判断modalData是否存在，再渲染 */}
    {modalData && (
      <>
        <Typography variant="h6">{modalData.name}</Typography>
        <Typography>{modalData.surname}</Typography>
      </>
    )}
  </Box>
</Modal>

2. 使用可选链操作符?.简化空值检查 #

如果不想写额外的条件判断，可选链操作符可以直接在访问属性时做空值保护：

<Modal open={open} onClose={() => {
  setOpen(false);
  setModalData(null);
}}>
  <Box sx={{ padding: 2, maxWidth: 400, margin: 'auto', marginTop: '10%', backgroundColor: 'white' }}>
    <Typography variant="h6">{modalData?.name}</Typography>
    <Typography>{modalData?.surname}</Typography>
  </Box>
</Modal>

当modalData为null或undefined时，?.会返回undefined，不会触发报错。

3. 初始化modalData为默认空对象 #

如果希望避免null状态，可以把modalData的初始值设为符合结构的空对象：

const [modalData, setModalData] = useState({ id: 0, name: '', surname: '' });

这样即使未赋值，访问modalData.surname也只会得到空字符串，不会报错。

另外，建议在Modal关闭时重置modalData为null或空对象，避免下次打开Modal时显示上一次的旧数据。

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