在 React 中渲染数组

Question

我试图在我的渲染函数中渲染我的arr 。代码没有给出任何错误。在这里我试图计算斐波那契数列并将其显示在屏幕上。代码的问题是当我输入某个文本字段中的数字不会在屏幕上打印系列，但是当我清除文本字段而不刷新时，它会在屏幕上打印正确的系列。我无法理解此错误的来源。

import React, { useState } from 'react';
import { Button, TextField } from '@material-ui/core';
import './App.css';

function App() {
  const [limit, setLimit] = useState(1);
  const [arr, setArr] = useState([]);

  function handleGenerateFibonacci(event) {
    for (const n of generator(limit)) {
      arr.push(n)
      setArr(arr)
    }
    event.preventDefault();
  }

  function* generator(limit) {
    var i = 0;
    var a = 0;
    var b = 1;
    yield a;
    yield b;
    for (i = 1; i <= limit - 1; i++) {
      var fibNumber = a + b
      yield fibNumber
      a = b
      b = fibNumber
    }
  }



  return (
    <div className="App">
      <form >
        <h1>Generating the Fibonacci Series</h1>
        <h2>Enter the range</h2>
        <TextField onChange={e => setLimit(e.target.value)}></TextField>
        <br />
        <Button onClick={handleGenerateFibonacci} type="submit" style={{
          height: 40,
          width: 160,
          borderRadius: 10,
          backgroundColor: "Blue",
          marginLeft: 50,
          marginRight: 50,
          marginTop: 20,
          fontSize: 16,
          color: "white"
        }} >Calculate</Button>
        <br />
        <h2>Result:</h2>
        <div >
        <p>Fibonacci Series : {"[ " + arr + " ]"}</p>
        </div>
      </form>
    </div>
    
  );
}


export default App;

Answer 1

因为当您单击按钮时，您的代码不会改变值本身，只是值的内容

function handleGenerateFibonacci(event) {
    for (const n of generator(limit)) {
      arr.push(n)
      setArr(arr)
    }
    event.preventDefault();
  }

...所以系统并不真正知道您的数组已被更改，所以最好这样写

function handleGenerateFibonacci(event) {
    for (const n of generator(limit)) {
      arr.push(n)
    }
    setArr([...arr])
    event.preventDefault();
  }

PS 当您清理文本字段时，状态的限制属性正确更改，因此系统刷新组件

Answer 2

试试这个方法，

function handleGenerateFibonacci(event) {
    for (const n of generator(limit)) {
      setArr((a) => [...a, n]);
    }
    event.preventDefault();
  }

工作演示 - https://codesandbox.io/s/festive-mayer-xu91t?file=/src/App.js:270-423