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

Question

This is the source code.

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)

What I want to do is to push a new value into the current array and update length and values when I click the push button.
It printed to the console normally, but not change the display.
How to resolve this?

标签： javascriptarraysreactjsreact-hooksuse-effect

Answer 1

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

始终以不可变的方式更新您的状态。

在你的情况下：

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