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

Question

我正在尝试获取渲染函数内部并有一个执行某些操作的 then 函数。我的代码如下。但是，它似乎从未调用过 then 函数。

fetch(url, {
          method: "GET",
          headers: { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': "*", "Cache-Control": "no-store" },
          body: null
    })
.then(function (res) {console.log("here");finished++})
.catch(function (err) {console.log(err)});

while (finished<1) {}

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

Answer 1

您不应该在

render

方法内执行异步操作。 大多数获取数据 API 调用应在

componentDidMount

内完成。

你的渲染方法总是应该更关心返回 UI。 渲染方法应该是纯粹的，这意味着它只使用状态和道具来渲染，永远不要尝试修改状态或在渲染中执行任何其他操作。

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