为什么在React中使用useState设置时request payload为空？答案

【问题标题】：Why request payload is empty when using useState to set in React?为什么在React中使用useState设置时request payload为空？
【发布时间】：2022-11-23 17:14:12
【问题描述】：

我在 useEffect 中有一个异步函数，可以使用 Express.js 根据数据库 (mongodb) 的给定输入获取数据。在提交表单时，它应该将状态（给定的输入）传递给服务器并查找数据，然后将结果返回给前端。但是在提交时发送空状态并返回空数组。

Rsponse Request

反应组件：Compare.js `

import React, { useState, useCallback } from "react";
import { useEffect } from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Result from "./Result";

export default function () {
  const [compare, setCompare] = useState({
    proId1: "",
    proId2: "",
  });

  function handleChange(event) {
    const { value, name } = event.target;
    setCompare((prevData) => ({
      ...prevData,
      [name]: value,
    }));
  }



  const fetchData = useCallback(async () => {
    const response = await fetch("http://localhost:3000/api/compare", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        proId1: compare.proId1,
        proId2: compare.proId2,
      }),
    });

    const data = await response.json();
    return data
  }, []);

  return (
    <>
      <div>
        <h1>ENTER IDS TO COMPARE</h1>
        <form>
          <input
            type="text"
            className="proId1"
            placeholder="proId1"
            name="proId1"
            onChange={handleChange}
            value={compare.proId1}
          />
          <input
            type="text"
            className="proId2"
            placeholder="proId2"
            name="proId2"
            onChange={handleChange}
            value={compare.proId2}
          />

          <button
            className="submit"
            onClick={
              React.useEffect(() => {
                fetchData()
              },[fetchData])
            }
          >
            SUBMIT
          </button>
        </form>
      </div>
      <Result />
    </>
  );
}

` 服务器：

app.post("/api/compare", async  (req, res) => {
  try {
     let id1 = await req.body.proId1;
    let id2 = await req.body.proId2;
    let result = await model.find({ id: { $in: [id1, id2] } })
    res.send(result)
  } catch (error) {
    res.json({ status: "error", error: "error" });
  }
});

` 预期要求：

{
    "proId1":"1",
    "proId2":"3"

}

expected Response

[
    {
        "_id": "637c5dddb9b084433f13d3f7",
        "id": "1",
        "name": "dffdf",
        "price": "100$",
        "ratings": "2",
        "__v": 0
    },
    {
        "_id": "637c5df3b9b084433f13d3fb",
        "id": "3",
        "name": "dffdf",
        "price": "25$",
        "ratings": "5",
        "__v": 0
    }
]

【问题讨论】：

在开始请求之前，您是否检查过状态设置是否正确？
是的，只要输入框中的值发生变化，我就会设置“比较”状态。
那么，如果您在 const response 之前的 useCallback 中使用 console.log(compare.proId1, compare.proId2)，它会显示正确的值吗？
不，它也是空的。为什么不设置“比较”？

标签： node.js reactjs react-hooks async-await

【解决方案1】：

您错误地使用了钩子。

推荐大家慢慢阅读this article，注意useCallback和useEffect。

            onClick={
              React.useEffect(() => {
                fetchData()
              },[fetchData])
            }

这不是使用方法使用效果.

点击你想加载你的数据，所以这样做

onClick={fetchData}

还使用回调没有依赖关系也是无缝的，它是保存收入值以避免弹跳的记忆挂钩。所以你可以将你的状态放入它的依赖项中，但在我看来它有点过分并且你可以在没有 useCallback 包装器的情况下使用它。

在你的里面fetchDatahandler 您想将结果放入状态以便稍后显示，因此为结果定义状态并将其设置在处理程序中

  const [apiResponse, setApiResponse] = useState();

  const fetchData = useCallback(async () => {
    const response = await fetch("http://localhost:3000/api/compare", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        proId1: compare.proId1,
        proId2: compare.proId2,
      }),
    });

    const data = await response.json();
    setApiResponse(data)
  }, [compare]);

【讨论】：