reactjs-Axios 帖子返回空对象

Posted 2023-03-27

【中文标题】reactjs-Axios 帖子返回空对象

【英文标题】：reactjs- Axios post returns empty object

【发布时间】：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": "[e-mail]",
      "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)

【参考方案1】：

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

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

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