代码之家 › 专栏 › 技术社区 › Devmix

为什么promise response在功能组件中两次收到调用?[副本]

promise reactjs javascript

Devmix · 技术社区 · 3 年前

我有一段使用承诺的代码,但我的问题是当我使用控制台时。记录响应并打印两次,为什么?谁能给我指出正确的方向吗?提前谢谢!

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;

1 回复 | 直到 3 年前

AKX Bryan Oakley 3 年前

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;

推荐文章