Axios.post 不斷向我的 API 發送空對象

Question

我正在嘗試向我的奶牛 API 發布有關奶牛的新信息，但是，每次我點擊前端的提交按鈕時，它似乎都發送了一個空的 object 而不是奶牛的名稱、奶牛的描述和圖像牛的（通過 url）。 是什么導致它發送一個空的 object 而不是我想要的數據？

這是前端代碼：

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

這是顯示正在發布的空對象的圖像：

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 掛鈎中，以防止您的應用程序在每次重新呈現時發出請求。 使用這樣的東西，應用程序將僅在第一個組件呈現時發出請求。

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

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

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