React组件提交时e.target.name报undefined错误求助

错误原因 #

问题出在handleEditSetup函数的fetch回调里：

.then(data => {
  handleChange(data)
})

handleChange是为表单输入事件设计的，它的参数应该是浏览器的事件对象(e)，但你传入了后端返回的data对象。这时候handleChange里访问e.target会得到undefined，进而触发Cannot read properties of undefined (reading 'name')的报错。

修复方案 #

1. 替换错误的handleChange调用

不要用handleChange处理后端返回的数据，直接用setFormData更新状态，或者根据业务需求完成后续操作：

function handleEditSetup(e) {
  e.preventDefault();

  fetch(`/setups/${id}`, {
    method: "PATCH",
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(formData)
  })
  .then(res => res.json())
  .then(data => {
    // 用后端返回的更新后数据同步表单状态
    setFormData(data);
    // 可选：退出编辑模式
    setIsEdit(false);
  })
  .catch(err => console.error('更新失败:', err)) // 建议加上错误捕获
}

2. 避免初始化时的潜在报错

如果setup props是异步加载的（比如从API获取），初始渲染时可能为undefined，直接解构会导致报错。可以给解构加上默认值：

const {name = "", description = "", photo = "", genre = "", id = ""} = setup || {};

修改后的完整组件关键代码 #

function EditSetup({setup, isEdit, setIsEdit}) {
  const { user, setUser } = useContext(UserContext);
  // 加默认值避免setup为undefined时报错
  const {name = "", description = "", photo = "", genre = "", id = ""} = setup || {};

  const [formData, setFormData] = useState({
    name: name,
    description: description,
    photo: photo,
    genre: genre
  });


  function handleChange(e) {
    setFormData({...formData, [e.target.name]: e.target.value})
  }

  function handleEditSetup(e) {
    e.preventDefault();

    fetch(`/setups/${id}`, {
      method: "PATCH",
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(formData)
    })
    .then(res => res.json())
    .then(data => {
      setFormData(data);
      setIsEdit(false);
    })
    .catch(err => console.error('更新失败:', err))
  }

  // ... 返回部分不变
}

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