不在 React JS 中重新渲染

Question

为什么我的数组没有重新渲染？

import React, { useEffect, useState } from 'react';

const App = () => {
    const [arr,setArr] = useState([5,4,3,2,1]);
    const handleClick = ()=>{
        let newArr = arr;
        newArr[0]++;
        setArr(newArr);
    };

    return (
        <>
            {arr.map((item) => (
                <h1 key={item}>{item}</h1>
            ))}
            <button onClick={handleClick}>buttong</button>
        </>
    );
}

export default App;

Answer 1

永远不要改变 React 中的状态。

let newArr = arr;通过这样做，您分配的是arrin的引用而newArr不是它的值。因此，当您这样做时，newArr[0]++;您正在改变状态，因为newArr它是对arr数组的引用。

在这里，const newArr = [...arr];我们arr使用扩展运算符获取值的副本，然后改变副本而不是状态，然后使用setArr(newArr);

了解传递值和引用之间的区别：https : //dmittripavlutin.com/value-vs-reference-javascript/

尝试这个：

const App = () => {
  const [arr, setArr] = useState([5, 4, 3, 2, 1]);
  const handleClick = () => {
    const newArr = [...arr];
    newArr[0]++;
    setArr(newArr);
  };
  return (
    <>
      {arr.map((item) => {
        return <h1 key={item}>{item}</h1>;
      })}
      <button onClick={handleClick}>buttong</button>
    </>
  );
};
export default App;