react-Post 方法仅添加新的 "id" 但未添加 body 标签内的数据

Question

我可以看到在正文标签 POST 方法中添加了正确的数据，但最后 url 只添加了 id。我做错了什么吗？

以下是我得到的输出，数据应该像 id:3，但随后 Post 的唯一 ID 被添加。

{
id: "3",
title: "Greek Salad",
ingredients: [
"1 Onion",
"1 Block of Feta",
"Olives",
"Tomatoes",
"Olive Oil"
],
method: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Esse minima ex rem quis similique eum ratione quaerat, voluptas molestias ut repudiandae delectus voluptates. Eius esse at tenetur ab accusamus excepturi?",
cookingTime: "35 minutes"
},
{
id: "lXOYU8C"
},
{
id: "IacXVJs"
},

我正在为 get& post 方法使用以下钩子。

const useFetch = (url, method="GET") => {
  const [data, setData] = useState(null);
  const [isPending, setIsPending] = useState(false);
  const [error, setError] = useState(null);
  const [option, setOptions] = useState(null)

  const PostData = (info)=>{

    setOptions({
      method:"POST",
      header:{
        "Content-Type":"application/json"
      },
      body : JSON.stringify(info)
    })
  }

  const fetchData = async (fetchOptions) => {
    console.log("fetchOptions :",fetchOptions)
    try {
      setIsPending(true);

      const response = await fetch(url,{...fetchOptions});
      const databyresponse = await response.json();

      setIsPending(false);
      setData(databyresponse);
      setError(null);
    } catch (e) {
      setIsPending(false);

      console.log("error", e);

      setError(e);
    }
  };

  useEffect(() => {

    if(method == "GET"){
      
      fetchData();
    }
    if(method == "POST" && option){

      fetchData(option);

    }
  }, [url,option,method]);

  return { data, isPending, error, PostData };
};

export default useFetch;

这就是我调用 post 方法的方式。

const  {data, isPending, error, PostData } = useFetch("http://localhost:3000/recipes", "POST");

 
  const [input, setInput] = useState({
    title: "",
    cookingTime: "",
    method: "",
  });
  const [ingtext, setIngtext] = useState("");
  const [ingredients, setIngredients] = useState([]);

  const IngredientInput = useRef(null);

  const onSubmithandler = (e) => {
    console.log("submitted");
    e.preventDefault();
    console.log({input,ingredients})
   let title = input.title;
   let cookingTime = input.cookingTime;
   let method = input.method;

    PostData({title,cookingTime,method,ingredients})
  };

Answer 1

应该是：

setOptions({
  methods:"POST",
   header: {
        "Content-Type": "application/json"
    },
    body: JSON.stringify(info)
})

methods 中丢失的 s 是罪魁祸首。

react-Post 方法仅添加新的 "id" 但未添加 body 标签内的数据

react-Post method only adding new "id" but data inside body tag not getting added

post

reactjs

react-hooks