Axios.post 不断向我的 API 发送空对象

Question

我正在尝试 post 向我的奶牛发送有关奶牛的新信息 API，但是，每次我点击前端的提交按钮时，它似乎都在发送一个空对象而不是奶牛的名字、奶牛的描述和奶牛的形象（来自url）。是什么导致它发送一个空对象而不是我想要的数据？

这是前端代码：

import React, { useEffect, useState } from 'react';
import axios from 'axios';
import './App.css';
const baseUrl = "http://localhost:3001/api/cows"

function Display({setNameOfCow, setImageOfCow, setDescriptionOfCow, nameOfCow, imageOfCow, descriptionOfCow}) {
  axios.get(baseUrl)
  .then(res => res.data)
  .then(res => {
    setNameOfCow(res.name)
    setImageOfCow(res.image)
    setDescriptionOfCow(res.description)
  })

  return (
    <div>
      <p>{nameOfCow}</p> 
      <img src={imageOfCow}/><p>{descriptionOfCow}</p>
    </div>
  )
}

function Input({setNameOfCow, setImageOfCow, setDescriptionOfCow, nameOfCow, imageOfCow, descriptionOfCow}) {

  function handleSubmit(e) {
    e.preventDefault()
    let newObject = {
      name: nameOfCow,
      description: descriptionOfCow,
      image: imageOfCow
    }

    axios.post(baseUrl, newObject)
  }

  return (
    <div>
      <form>
        <label htmlFor="name">name: </label>
        <input type="text" id="name" onChange={(e) => {
          const eTarget = e.target.value
          setNameOfCow(eTarget)}}/><br></br>
        <label htmlFor="description">description: </label>
        <input type="text" id="description" onChange={(e) => {
          const eTargetDesc = e.target.value
          setDescriptionOfCow(eTargetDesc)}}/><br></br>
        <label htmlFor="image">image url: </label>
        <input type='text' id="image" onChange={(e) => {
          const eTargetImage = e.target.value
          setImageOfCow(eTargetImage)}}/><br></br>
        <button type="submit" onSubmit={handleSubmit}>Add a cow!</button>
      </form>
    </div>
  )
}

function App() {
  const [nameOfCow, setNameOfCow] = useState('')
  const [descriptionOfCow, setDescriptionOfCow] = useState('')
  const [imageOfCow, setImageOfCow] = useState('')

  return (
    <div className="App">
      <Input imageOfCow={imageOfCow} setNameOfCow={setNameOfCow} setDescriptionOfCow={setDescriptionOfCow} setImageOfCow={setImageOfCow} />
      <Display setNameOfCow={setNameOfCow} setImageOfCow={setImageOfCow} setDescriptionOfCow={setDescriptionOfCow} nameOfCow={nameOfCow} imageOfCow={imageOfCow} descriptionOfCow={descriptionOfCow} />
    </div>
  );
}

export default App

这是显示正在 posted 的空对象的图像：

Answer 1

查看您的输入组件道具：

function Input({setNameOfCow, setImageOfCow, setDescriptionOfCow, nameOfCow, imageOfCow, descriptionOfCow}) {...

我们可以看到您在使用此组件时缺少传递此道具：

<Input imageOfCow={imageOfCow} setNameOfCow={setNameOfCow} setDescriptionOfCow={setDescriptionOfCow} setImageOfCow={setImageOfCow} />

正确的使用方法是这样的：

<Input
    imageOfCow={imageOfCow}
    nameOfCow={nameOfCow}
    descriptionOfCow={descriptionOfCow}
    setNameOfCow={setNameOfCow}
    setDescriptionOfCow={setDescriptionOfCow}
    setImageOfCow={setImageOfCow}
  />

防止表单默认行为的正确方法是在表单属性中设置 onSubmit 和 handleSubmit（您可以从按钮中删除）：

 <form onSubmit={handleSubmit}>

否则，一个非常好的更改是将您的 axios 请求放在 useEffect 挂钩中，以防止您的应用程序每次都发出请求 re-render。使用类似这样的东西，应用程序将仅在第一个组件呈现时发出请求。

  const getCow = async (baseUrl) => {
    const cow = await axios.get(baseUrl);

    setNameOfCow(cow.name);
    setImageOfCow(cow.image);
    setDescriptionOfCow(cow.description);
  };

  useEffect(() => {
    getCow(baseUrl);
  }, []);

Axios.post 不断向我的 API 发送空对象

Axios.post keeps sending empty objects to my API

javascript

reactjs

axios