React中useState出现Cannot read properties of undefined错误求助

问题描述 #

我是React初学者，开发了一个查看员工详情的表单：调用API获取员工列表填充表格，点击按钮时通过id调用接口获取员工详情填充表单。但因为employee仅在点击查看按钮后才会被填充，浏览器控制台报错：Uncaught TypeError: Cannot read properties of undefined (reading name)。

相关代码如下：

const [rows, setRows] = useState([]);
const [employee, setEmployee] = useState<Employee>([]);

useEffect(() => {
    new EmployeeService()
      .findAll()
      .then((res) => {
        return res.data;
      })
      .then((res) => setRows(res));
  }, []);

const employeeView = async (id: string) => {    
    await new EmployeeService()
      .find(id)
      .then((res) => {        
        return res.data;        
      })
      .then((res) => setEmployee(res));        
   };
<Dialog fullScreen open={openDialog} onClose={close}>
          <DialogContent>
            <DialogContentText>
              Employee
            </DialogContentText>
            <TextField
              autoFocus
              margin="dense"
              id="name"              
              value={employee.name}
            />
            <TextField
              autoFocus
              margin="dense"
              id="factory"              
              value={employee.factoryName}
            />          
          </DialogContent>
          <DialogActions>
            <Button onClick={setDialog}>Close</Button>
          </DialogActions>
</Dialog>

解决方案 #

1. 修正employee的初始化值 #

你当前把employee初始化为数组[]，但它应该对应单个员工对象。改成初始化空对象，匹配Employee类型的结构：

const [employee, setEmployee] = useState<Employee>({} as Employee);

2. 使用可选链+默认值安全访问属性 #

在读取employee的属性时，添加可选链操作符?.避免对象未初始化时报错，同时用|| ''确保输入框有合法的空字符串值：

<TextField
  autoFocus
  margin="dense"
  id="name"              
  value={employee?.name || ''}
/>
<TextField
  autoFocus
  margin="dense"
  id="factory"              
  value={employee?.factoryName || ''}
/>

3. 优化异步请求写法（可选） #

你的employeeView同时混用了await和then，统一改成async/await写法更易读，还能添加错误处理：

const employeeView = async (id: string) => {    
    try {
      const res = await new EmployeeService().find(id);
      setEmployee(res.data);
    } catch (error) {
      console.error('获取员工详情失败:', error);
    }
   };

4. 控制Dialog加载状态（可选优化） #

可以添加加载状态，避免在请求未完成时展示空输入框：

const [loading, setLoading] = useState(false);

const employeeView = async (id: string) => {    
    setLoading(true);
    setEmployee({} as Employee); // 清空旧数据
    try {
      const res = await new EmployeeService().find(id);
      setEmployee(res.data);
    } catch (err) {
      console.error('获取员工详情失败', err);
    } finally {
      setLoading(false);
      setDialog(true);
    }
   };

然后在Dialog中添加加载提示：

<Dialog fullScreen open={openDialog} onClose={close}>
  <DialogContent>
    <DialogContentText>Employee</DialogContentText>
    {loading ? (
      <p>加载中...</p>
    ) : (
      <>
        <TextField
          autoFocus
          margin="dense"
          id="name"              
          value={employee?.name || ''}
        />
        <TextField
          autoFocus
          margin="dense"
          id="factory"              
          value={employee?.factoryName || ''}
        />
      </>
    )}
  </DialogContent>
  <DialogActions>
    <Button onClick={setDialog}>Close</Button>
  </DialogActions>
</Dialog>

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