如何在反应钩子中调用 API 后立即显示数据

Question

我不明白为什么从道具读取数据的第二行没有像第一行那样立即显示，我希望它们立即显示 我在单击按钮时更新状态，它调用api，数据正在进入，状态正在更新，但是第二行需要额外按下才能显示 通话后如何同时显示两条线路？我的错误是什么？ 我正在使用反应钩子，我知道需要使用 useEffect 重新渲染组件，我知道异步调用如何工作，但我有点困惑，我该如何解决我的问题，也许我需要使用“useDeep 效果”来观察我的对象属性，或者我根本不明白如何在我的情况下使用“useEffect”，甚至我的 api 调用不正确？

我尝试了许多不同的解决方法，例如使用 Promise.all，等待响应，然后才更新状态

index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./test";

ReactDOM.render(<App />, document.getElementById("root"));

app.js

  import React, { useState, useEffect } from "react";
  import ReactDOM from "react-dom";

  const useDataApi = (initialState) => {
    const [state, setState] = useState(initialState);
    const stateCopy = [...state];

    const setDate = (number, value) => {
      setState(() => {
        stateCopy[number].date = value;
        return stateCopy;
      });
    };

    const setInfo = async () => {
      stateCopy.map((item, index) =>
        getFetch(item.steamId).then((res) => setDate(index, res.Date))
      );
    };

    const getFetch = async (id) => {
      if (id === "") return;
      const requestID = await fetch(`https://api.covid19api.com/summary`);
      const responseJSON = await requestID.json();
      console.log(responseJSON);
      const result = await responseJSON;
      return result;
    };

    return { state, setState, setInfo };
  };

  const Children = ({ data }) => {
    return (
      <>
        <ul>
          {data.map((item) => (
            <li key={item.id}>
              {item.date ? item.date : "Not data"}
              <br></br>
            </li>
          ))}
        </ul>
      </>
    );
  };

  const InfoUsers = ({ number, steamid, change }) => {
    return (
      <>
        <input
          value={steamid}
          numb={number}
          onChange={(e) => change(number, e.target.value)}
        />
      </>
    );
  };

  function App() {
    const usersProfiles = [
      { date: "", id: 1 },
      { date: "", id: 2 }
    ];
    const profiles = useDataApi(usersProfiles);

    return (
      <div>
        <InfoUsers number={0} change={profiles.setID} />
        <InfoUsers number={1} change={profiles.setID} />
        <button onClick={() => profiles.setInfo()}>Get</button>
        <Children data={profiles.state} loading={profiles} />
      </div>
    );
  }

  export default App;

要获取数据，只需单击 GET 在这个例子中，完全去掉了useEffect，可能我不明白如何正确使用它。 P.s: 抱歉英语不好

Answer 1

你不需要stateCopy，因为你在setState的回调中有它：

const setInfo = async () => {
  // we want to update the component only once
  const results = await Promise.all(
    state.map(item => getFetch(item.steamId))
  );
  // 's' is the current state
  setState(s =>
    results.map((res, index) => ({ ...s[index], date: res.Date })
  );
};