在 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