在 React 中使用 fetch() 处理承诺？

Question

我正在创建我的第一个 MERN 堆栈应用程序，并尝试实现一个简单的 API 从我的 React 前端组件调用我的快速服务器。我有 API 在后端工作，它通过 fetch() 正确发送数据，但我无法在我的 React 组件中解决来自 fetch() 的承诺，使用呼叫不停止射击。我的代码如下所示（假设现在所有 API 都调用 return 虚拟格式，例如 { title: 'foo', ... }:

import React, { useState } from 'react';
import 'core-js/stable';
import 'regenerator-runtime/runtime';

const getApiData = async (route) => {
  try {
    let apiData = await fetch(route);
    let apiDataJson = await apiData.json();
    return apiDataJson;
  } catch (err) {
    throw new Error('Error on fetch', {
      error: err
    })
  }
}

var retrieve_data = async (route, setterCallback) => {
  await getApiData(`/api/${route}`).then((data) => {
    console.log('Data retrieved from API')
    setterCallback(<div>{data.title}</div>)
  }).catch(() => {
    setterCallback(<div>ERROR</div>)
  })
}

const MyComponent = () => {

  const [innerDiv, setinnerDiv] = useState(0);

  let data = retrieve_data('myEndpoint', setinnerDiv);

  return(
    <div>
      <h1>Data Retrieved in MyComponent:</h1>
      {innerDiv}
    </div>
  );
}

当我编译上面的组件时，组件成功呈现（即 <MyComponent /> 看起来像：

<div>
    <h1>Data Retrieved in MyComponent:</h1>
    <div>foo</div>
</div>

但是，then 块继续执行（即 'Data retrieved from API' 将数百个 times/second 记录到控制台，直到我关闭应用程序。一旦它执行，我该如何停止执行设置组件了吗？谢谢！

Answer 1

您需要useEffect 来阻止组件重新渲染。尝试这样的事情。

const MyComponent = () => {

  const [innerDiv, setinnerDiv] = useState(0);

  useEffect(() => {
    retrieve_data('myEndpoint', setinnerDiv);
  }, []);

  return(
    <div>
      <h1>Data Retrieved in MyComponent:</h1>
      {innerDiv}
    </div>
  );
}

在 React 中使用 fetch() 处理承诺？

Handling promises with fetch() in React?

javascript

asynchronous

fetch

reactjs

es6-promise