反转存储在状态中的数组不会强制React中组件的重新呈现

Question

这是一个更大的组件的一部分，但我在下面的一个可重复的例子中总结了它：

    import React, {useState} from 'react'

   
    function App() {
        const [data,setData] = useState([{name:'first'},{name:'second'},{name:'three'}])

       // Function to reverse a given array
        const reverseArray = (array) => {
          var reverseArray = array.reverse();
          return reverseArray;
        }


        return (
            <div>
                  {data.map((item,index)=>{
                         return <h1 key={index}>{item.name} index: {index}</h1>
                    })}
            

                    {/*When I click this I expect the div above to rerender */}
                    <button onClick={()=>{
                        var newData = data;
                        setData(reverseArray(newData))}
                    }>
                      Reverse Order
                     </button>

                    {/* Logs state to the console to check order is reversed */}
                    <button onClick={()=>console.log(data)}>Log Data</button>

                    {/* Clearing the state by setting to empty array */}
                    <button onClick={()=>setData([ ])}>Clear Data</button>

                    
            </div>
        )
    }

我知道React中的组件在状态改变时会重新呈现，为什么将新数组设置为状态不会触发这个呢？但是在清除状态时rerender是明显的？

我的沙盒：https://codesandbox.io/s/immutable-sun-oujqj？file=/src/app.js

Answer 1

演示:https://codesandbox.io/s/array-reverse-react-state-0v67h

array.prototype.reverse()将元素反转到位。您需要将一个新数组传递到setdata()中。

<button
  onClick={() => {
    var newData = data;

    // Create a new array using the spread operator
    setData(reverseArray([...newData])); 
  }}
>