了解异步React渲染

Question

我是学习React的新手，我想知道为什么以下代码无法按预期工作。我以为会显示，The numbers: 0123但只会显示0。我还对基于类的组件使用了相同的方法，并使用了钩子，但仍然得到了相同的结果。使用异步代码进行反应渲染时，我不了解什么？

import React from "react";
import ReactDOM from "react-dom";

function App() {
  let numbers = [0];

  fetch("some.url")
    .then(res => res.json())
    .then(list => {
      for (let n of list) {
        numbers.push(n);
      }
    });

  return <div className="App">The numbers: {numbers}</div>;
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 1

number您的代码打印 0，因为它是渲染时变量的值。

您使用以下代码：

fetch("some.url")
    .then(res => res.json())
    .then(list => {
      for (let n of list) {
        numbers.push(n);
      }
    });

异步获取新值，但不会产生任何效果：组件已经渲染。

如果你想刷新它，你必须将你的变量号放入state并使用setState()来传递新值。

如果您想保留功能组件，您应该使用全新的 hooks 功能，它应该为您提供相当于setState.