为什么承诺响应在功能组件中被调用两次？

Question

我有这段使用承诺的代码，但我的问题是当我 console.log 响应打印 2 次时，这是为什么？谁能指出我正确的方向？提前致谢！

import "./App.css";
import { useState } from "react";

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

  let itemsApi = new Promise(function (resolve, reject) {
    setTimeout(() => {
      resolve([
        { grupoId: 1, name: "test1" },
        { grupoId: 2, name: "test2" },
        { grupoId: 1, name: "test3" }
      ]);
    }, 500);
  });

  itemsApi
    .then((res) => {
      console.log(res); // This gets call 2 times, why??
    })
    .catch((error) => {});

  return <div>test</div>;
}

export default App;

Answer 1

React 可以随意调用你的组件函数多次（事实上，在严格模式下它通常会调用它两次，以确保你没有做有副作用的坏事——就像你现在是）。

下面是如何使用 useEffect 正确执行异步数据加载的示例。

loadData 这里只是一个模拟函数，它需要 500 毫秒来处理 return 数据，但也可以是其他任何东西。

function delay(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

async function loadItems() {
  const data = [
    { grupoId: 1, name: "test1" },
    { grupoId: 2, name: "test2" },
    { grupoId: 1, name: "test3" },
    { grupoId: 1, name: "test4" },
    { grupoId: 3, name: "test5" },
    { grupoId: 2, name: "test6" },
  ];
  await delay(500);
  return data;
}

function App() {
  const [data, setData] = useState([]);
  React.useEffect(() => {
    loadItems().then(setData);
  }, []); // <- empty dependency array has this effect only run once
  return <div>{JSON.stringify(data)}</div>;
}

export default App;

为什么承诺响应在功能组件中被调用两次？

Why is promise response getting call twice in functional component?

javascript

promise

reactjs