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

【问题标题】：reactjs- Axios post returns empty objectreactjs-Axios 帖子返回空对象
【发布时间】：2021-08-14 06:01:58
【问题描述】：

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": "json@net.com",
      "id": 1
    }
  ]
}

【问题讨论】：

我们需要localhost:3002/posts 接收端的代码才能知道这里发生了什么。
@WillWalsh 我添加了 json 文件
我的意思是那个 URL 上的服务器代码，它处理来自 ReactJS 前端的数据接收。它是处理:3002/posts 的 NodeJS/Express 服务器吗？可能还尝试在axios.post 调用之前添加console.log({name, email}); 以确保可以看到数据。
@WillWalsh 这个？ POST /posts/ 201 33.528 ms - 42
触发handleSubmit 时添加console.log(name, email)

标签： reactjs axios json-server

【解决方案1】：

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

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

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

【讨论】：