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

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;

uj5u.com热心网友回复：

React 可以随意多次呼叫你的组件函式（实际上，在严格模式下，它通常会呼叫它两次，以确保你不会做有副作用的坏事——就像你现在所做的那样）。

这是一个如何使用useEffect.

loadData 这只是一个模拟函式，它需要 500 毫秒才能回传资料，但也可以是其他任何东西。

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;