React Hooks似乎没有从API设置数据

Question

我具有以下代码来查询产品数据库。

我已将console.log添加到事件中以进行检查。

function ProductSearch() {
  const [data, setData] = useState([]);

  async function handleSubmit(searchData) {
    const payload = searchData;
    console.log("Search Data:" + searchData);
    try {
      const response = await axios({
        url: `http://<domain>/Product/Search?keyword=${payload}&rowCount=10`,
        method: "get",
      });
      setData(response.data)
      console.log(response.data)
      console.log(data)
    } catch (error) {
      console.error(error);
    }
  }

第一个控制台日志，当我输入cake时显示搜索数据：Cakeresponse.data控制台日志返回所有对象。但是，数据返回0

我尝试仅执行总计，我仅尝试执行一个对象。关于数据为何未设置，我在这里遗漏了什么？

Answer 1

您正在将数据设置为状态，React只是输出状态的陈旧版本。

据我了解，这就是React管理状态的方式（此处是后端开发人员，对任何不良术语表示歉意），如果您在设置状态的同一函数中运行console.log状态，则该函数不会返回最多状态的最新版本，而不是函数运行时该状态的“快照”。

如果您创建一个将钩子变量输出到控制台的按钮，并在设置状态后单击该按钮，则会得到最新的结果。

这在我工作的地方非常痛苦，浪费了数百个小时来处理此类问题。