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

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

我不太确定您想将什么值推送到数组中，但问题的根本原因是您正在改变有状态数组然后尝试更新它（在第 22 和 23 行）。

删除第 22 行的 arr.push(0) 并将第 23 行替换为：

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

你会看到实时状态更新。在这个例子中，我只是在每次单击按钮时将 0 添加到数组中，您可以将其更改为您想要推入数组的任何值。切记永远不要改变有状态数组，希望对您有所帮助！

Answer 2

如果 setState return 与之前的状态相同，React 将不会重新渲染。当您使用 push 方法时，您会改变状态对象。而是用新项目创建一个新数组。

总是以不可变的方式更新你的状态。

你的情况：

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

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

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

How to push a new value into the current array using the react hooks?

javascript

arrays

reactjs

react-hooks

use-effect