e.target.name 在提交时给出未定义的错误

Question

这是我点击“保存”时返回的错误，一旦刷新，编辑就会在浏览器中正确显示

“未处理的拒绝（类型错误）：无法读取未定义的属性（读取'名称'）”

此错误与“editSetup”组件内的“handleChange”函数有关。这是该组件的完整代码

import React, { useState, useContext } from 'react';
import { UserContext } from '../context/UserContext';

import Container from 'react-bootstrap/Container';
import Form from 'react-bootstrap/Form';
import Button from 'react-bootstrap/Button';

function EditSetup({setup, isEdit, setIsEdit}) {
  const { user, setUser } = useContext(UserContext);
  const {name, description, photo, genre, id} = setup;

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


  function handleChange(e) {
    console.log('e',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 => {
      handleChange(data)
    })
  }

  

  return (
    <Container>
    <Form onSubmit={handleEditSetup}>
      <Form.Label>Name:</Form.Label>
      <Form.Control
        type="text"
        name="name"
        value={formData.name}
        onChange={handleChange}
      />
      <Form.Label>Description:</Form.Label>
      <Form.Control
        as="textarea"
        rows={3}
        type="text"
        name="description"
        value={formData.description}
        onChange={handleChange}
      />
      <Form.Label>Photo:</Form.Label>
      <Form.Control
        type="text"
        name="photo"
        value={formData.photo}
        onChange={handleChange}
      />
      <Form.Label>Genre:</Form.Label>
      <Form.Control
        type="text"
        name="genre"
        value={formData.genre}
        onChange={handleChange}
      />
      <Button variant="success" type="submit">
        Save
      </Button>
    </Form>
    </Container>
  );
}

export default EditSetup

我尝试更改表单中的“名称”属性，但没有帮助

Answer 1

正如

@Jaromanda X

在他的评论中所建议的，

handleChange

是一个事件处理程序，即它期望一个事件作为参数，但是您传递的是一个普通对象。 您只需要在请求后更新数据，如下所示：

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