如何获取 API 并存储一些值，然后在 React 中使用存储的值再次获取

Question

目前我正在获取一些数据并通过useState 保存响应。响应已保存，但问题是在保存状态之前进行第二次获取，使该值变为undefined。

我试着这样做：

  useEffect(() => {
    fetchTrackingData().finally(() => {
      console.log("Destination", destination.coordinates);
      fetchDriverLocation().finally(() => {
        setLoading(false);
      });
    });
  }, []);

基本上fetchTrackingData 函数具有我保存的目标坐标：

const [destination, setDestination] = useState('');

在fetchTrackingData 函数中，我在收到响应后设置状态。在fetchTrackingData 完成获取并保存destination 的状态后，我使用finally() 方法，然后调用第二个获取fetchDriverLocation 但它有destination 未定义，甚至我登录查看该值是否在finally() 之后保存，但日志中也是undefined。

如何将来自一个 API 的值存储在该 API 调用中，然后在另一个 API 调用中使用该值？

Answer 1

正如另一个answer 所说，您正在经历竞争条件，因为反应中的setState 通常是asynchronous。

我的建议是使用两个useEffects 来完成此操作：

useEffect(() => {
  fetchTrackingData();
}, []);

useEffect(() => {
  console.log("Destination", destination.coordinates);
  fetchDriverLocation().finally(() => {
    setLoading(false);
  });
}, [destination]);

上述内容将等到destination 发生更改，然后再继续获取驱动程序位置

Answer 2

您遇到的是一种竞争条件。

当您调用fetchTrackingData 时，它会向您的API 发出HTTP 请求，获得响应，然后它所做的最后一件事就是将destination 保存到state。但是当你调用setDestination时，这是另一个被启动的异步任务，然后你直接尝试从状态中访问它（它可能存在也可能不存在，取决于设置状态需要多长时间)。

我的建议是要么不依赖状态进行此过程（也许一个变量会这样做？或者甚至只是传递你的 http 请求的结果）或者更依赖于链接这些Promises 并将状态设置包含在 Promise 链中。但是，我赞成前一个建议

见：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

和：Chain React setState callbacks

Answer 3

您可以尝试使用 async await 方法，并在第一个 API 完成后调用其他 API。

例子：

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

  useEffect(() => {
    (async () => {
      const response = await fetch("someURL");
      const json = await response.json();
      setData(json);
      const responseList = await fetch("someURL" + json.data);
      const jsonData = await responseList.json();
      setData2(jsonData)
    })();
  }, []);


  return (
    <div>
        Hello
    </div>
  );
}

export default App;

Answer 4

通过使用 useEffect 获取数据从 firstURI 并发送 到 secondURI

  const [firstDate, setFirstData] = useState();
  const [secondDate, setSecondData] = useState();

  useEffect(() => {
    (async () => {
      const firstResponse = await fetch("firstURI");
      const firstResponseData = await firstResponse.json();
      setFirstData(firstResponseData);
      
      const secondResponse = await fetch("secondURI" + firstResponseData.data);
      const secondResponseData = await secondResponse.json();
      setSecondData(secondResponseData)
    })();
  }, []);