reactjs-Axios post 返回空对象

问题描述

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
    }
  ]
}

解决方法

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

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

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