reactjs - reactjs-Axios 帖子返回空对象

Question

Reactjs 的新手。我正在尝试使用 axios 将数据发布到本地服务器，但它返回一个空对象。我究竟做错了什么？我需要向 json 文件发送名称和电子邮件。

const FormNew = () => {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");

  const handleChangeName = (event) => {
    setName(...name, { name: event.target.value });
  };

  const handleChangeEmail = (event) => {
    setEmail(...email, { email: event.target.value });
  };

  const handleSubmit = (event) => {
    event.preventDefault();

    axios
      .post("http://localhost:3002/posts", {
        name: name,
        email: email,
      })
      .then((res) => {
        console.log(res.data);
      });
  };

  return (
    <Form onSubmit={handleSubmit}>
      <Field.Text
        label="Name"
        name="name"
        type="text"
        onChange={handleChangeName}
      />
      <Field.Text
        label="Email"
        name="email"
        type="email"
        onChange={handleChangeEmail}
      />
      <Button type="submit">Submit</Button>
    </Form>
  );
};
export default FormNew;

我试图发送数据的 Json 文件。

{
  "posts": [
    {
      "name": "JSON SERVER",
      "email": "[e-mail]",
      "id": 1
    }
  ]
}

标签： reactjsaxiosjson-server

Answer 1

你的钩子用错了，试试这样用

  const handleChangeName = (event) => {
    setName(event.target.value);
  };

  const handleChangeEmail = (event) => {
    setEmail(event.target.value);
  };