Javascript 在React中渲染数组

我试图在渲染函数中渲染我的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;

---

因为当你们点击按钮时，你们的代码并没有改变值本身，只是改变了值的内容

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当您清理文本字段时，状态的limit属性正在正确更改，因此系统将刷新组件

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

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当您清理文本字段时，状态的限制属性正在正确更改，因此系统将刷新组件

尝试此方法

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

工作演示-

尝试这种方法

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

工作演示-