React：获取调用的 then 函数未被调用

Question

我试图在渲染函数中获取并有一个 then 函数来做一些事情。我的代码如下。但是，它似乎从来没有调用过 then 函数。

获取（网址，{ 方法：“获取”， 标头：{ 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': "*", "Cache-Control": "no-store" }, 正文：空 }) .then(function (res) {console.log("here");finished++}) .catch(function (err) {console.log(err)});

而（完成

我尝试向传递给 then 函数的函数添加不同数量的参数。我也尝试过添加 finally 块。 cmets显示异步调用成功并成功返回，所以我无法理解问题所在。任何帮助将不胜感激。

Answer 1

您不应该在 render 方法中执行异步操作。 您的大部分获取数据 API 调用应在 componentDidMount 内完成。

您的渲染方法应该更关心返回 UI。 渲染方法应该是纯的，也就是说它只使用 state 和 props 来渲染，从不尝试修改 state 或在渲染中做任何其他动作。

export default class App extends React.Component {
  constructor() {
    super();
    this.state = { data: null }
  }
  

  async componentDidMount() {
    const apiData = await fetch();
    const jsoned = await apiData.json();
    this.setState({ data: jsoned });
  } 

  render() {
    if (!data) return null;

    return (
      <div>
        {data.map()}
      </div>
    );
  }
}