如何使用反应钩子将新值推送到当前数组中？

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