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

Question

我正在创建我的第一个 MERN 堆栈应用程序，并尝试实现一个简单的 API，该 API 从我的 React 前端组件调用我的 express 服务器。我的 API 在后端工作，它通过 fetch() 正确发送数据，但是我在 React 组件中解决来自 fetch() 的承诺时遇到了麻烦，并且调用没有停止触发。我的代码如下所示（假设目前所有 API 调用都返回一个虚拟格式，如 { 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' 记录到控制台数百次/秒，直到我关闭应用程序。设置组件后如何阻止它执行？谢谢！

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>
  );
}