如何使用反應鈎子將新值推送到當前數組中？

Question

這是源代碼。

import React, { useState } from "react"
import ReactDOM from "react-dom"
import "./styles.css"

function App() {
  const [arr, setArr] = useState([1,2,3]) 
  return (
    <div className="App">     
      <h1>        
        Length:{arr.length}      
      </h1>   
      <h2>
        Values:
        {arr.map(i=>i+',')}
      </h2>

      <button
        onClick={() => {
          arr.push(0)    //my wrong code
          setArr(arr)    //my wrong code
          // setArr(prevValues => [...prevValues, 0])//Alex K's answer
          // setArr(prevArr => [...prevArr, prevArr.length + 1]); //rotemls98's answer
          // setArr([...arr,1])//venkateshwar's answer
          console.log(arr);
        }}
      >
        push
      </button>
    </div>
  );
}

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

我想要做的是將一個新值推送到當前數組中，並在單擊按鈕時更新長度和值。
它正常打印到控制台，但不更改顯示。
如何解決這個問題？

Answer 1

如果 setState 返回與之前相同的狀態，react 將不會重新渲染。 當您使用 push 方法時，您會改變狀態對象。 而是使用新項目創建一個新數組。

始終以不可變的方式更新您的狀態。

在你的情況下：

onClick={() => {
   setArr((prevArr) => ([...prevArr, prevArr.length + 1]));
}}

Answer 2

我不太確定您想將哪些值推送到數組中，但問題的根本原因是您正在改變有狀態數組，然后嘗試更新它（第 22 行和第 23 行）。

刪除第 22 行的arr.push(0)並將第 23 行替換為：

setArr(prevValues => [...prevValues, 0])

您將看到實時狀態更新。 在這個例子中，我只是為每次按鈕點擊將 0 添加到數組中，您可以將其更改為您想要推送到數組中的任何值。 記住永遠不要改變有狀態的數組，希望這會有所幫助！

Answer 3

新數組的引用存儲在舊數組變量中

const [arr, setArr] = useState([1,2,3])
setArr([...arr,1])

Answer 4

setArr 應該包含一個箭頭函數來訪問 prevState，以避免不正確/過時的狀態快照，因為 react 調度狀態更新，它不會立即執行它們

const [arr, setArr] = useState([1,2,3]);
setArr(prevArr=>{
return [...prevArr,4]
});

如果它是一個對象，並且您想更改單個鍵的值。

const [userInput, setUserInput] = useState({
        enteredTitle: '',
        enteredAmount: '',
        enteredDate: ''
    });
setUserInput((prevUserInput)=>{
          return {
            ...prevUserInput,
            enteredTitle: "Something Else"
        }
})
//for copying the whole object, and only changing enteredTitle's value in it