Question

我是初学者，我想知道为什么以下代码无法按预期工作。我以为它将显示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

您可以使用useState钩子创建一个状态数组，并使用useEffect钩子获取数字列表，并在请求完成后更新数字。

>

示例

const { useState, useEffect } = React;

function getNumbers() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve([1, 2, 3, 4, 5]);
    }, 1000);
  });
}

function App() {
  const [numbers, setNumbers] = useState([0]);

  useEffect(() => {
    getNumbers().then(list => {
      setNumbers(numbers => [...numbers, ...list]);
    });
  }, []);

  return <div className="App">The numbers: {numbers.join(", ")}</div>;
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>

Answer 2

上面的代码段将帮助您了解哑（又名无状态）和智能（有状态）组件的正确用法。

使用反应生命周期开始思考它，以使其更加清晰

在以上代码段中，render（）已经使用初始值运行了

let numbers = [0];

并且由于更改不是在STATE或PROPS中进行的，因此不会进行重新渲染，您也无法获得预期的结果。

解决方案-

使功能组件成为类组件，即使其成为智能组件，或使用钩子（useState）使其成为智能组件。
使用道具钻探，即使用道具计算父组件中的值并将其传递给子组件

以此为契机，为“思考时反应”

More on Stateful vs Stateless

Answer 3

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

您使用以下代码：

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

以异步方式获取新值，但没有任何效果：该组件已经渲染。

如果要刷新它，必须将变量号放在state中，并使用setState()传递新值。

如果要保留功能组件，则应使用全新的钩子功能，它应该为您带来setState的等效功能。

Answer 4

那是功能组件，或stateless组件。它没有自己的状态。因此，如果您更改数字变量的值，则不会更改组件的状态。如果您确实想使用功能组件，则应编写获取url并更新父有状态组件中的状态的逻辑，并将numbers变量作为道具传递给无状态组件。

否则，如果不需要使用功能组件。将其更改为类组件，然后将numbers变量作为状态参数，然后通过setState()方法进行更改，一切将按预期进行。

我推荐这篇文章：https://medium.com/@Zwenza/functional-vs-class-components-in-react-231e3fbd7108

提示：功能组件现在可以通过Hooks具有状态： https://reactjs.org/docs/hooks-intro.html

Answer 5

在前端创建中，渲染是程序员必须处理的最重要的过程。渲染）（React中的方法是类组件中唯一需要的方法，它负责定义要在浏览器窗口中渲染的视图。关于此方法的工作方式有很多微妙之处，再加上React的聪明方法它的虚拟DOM概念，并且了解它们将极大地使任何有抱负的React开发人员受益。为了演示所讨论的习惯，我将参考此Codepen。 render（）101 渲染）（首先，它不是用户可调用的。它是React组件生命周期的一部分，通常在首次实例化React组件或该组件时由React在应用的不同阶段进行调用状态是新更改的，Render不接受任何参数，而是返回包含当前组件视图层次结构的JSX.Element，此视图层次结构稍后将转换为HTML并显示在浏览器窗口中。在生命周期内，以下情况称为渲染：

首先实例化React组件之后，然后调用constructor（）。更新组件的道具后在setState（）调用之后我建议这篇文章https://en.wikipedia.org/wiki/React_(web_framework)首先了解基本知识。

了解异步React渲染

5 个答案: