Javascript 组件没有'；不能用状态更新

当我点击add按钮时，状态会更新，但列表中仍然显示相同的内容。如何修复它以使其随状态更新

我也在使用sortablejs，但我从代码中删除了它，因为它似乎不相关，而且我不想用不必要的包把代码弄乱

import React, { useState } from "react";

import { ListGroup } from 'react-bootstrap';


const DraggableList = () => {

  const [events, setEvents] = useState([
    { id: 1, name: "shrek" },
    { id: 2, name: "fiona" },
    { id: 3, name: "donkey" },
  ]);

  const addEvent = () => {
    let newEvents = events
    let event = {
      id: events.length + 1,
      name: "dragon",
    }
    newEvents.push(event)
    setEvents(newEvents)
    console.log(events)
  }

  return (
    <div>
      <button onClick={addEvent}>Add</button>
      {events.map((item) => (
        <ListGroup.Item key={item.id} action variant="success">{item.name}</ListGroup.Item>
      ))}
    </div>
  );
};

export default DraggableList

import React，{useState}来自“React”；
从“react bootstrap”导入{ListGroup}；
常量拖动列表=（）=>{
const[events，setEvents]=useState([
{id:1，名字：“史瑞克”}，
{id:2，名字：“菲奥娜”}，
{id:3，名字：“驴子”}，
]);
常量addEvent=（）=>{
让newEvents=events
让事件={
id:events.length+1，
名称：“龙”，
}
newEvents.push（事件）
setEvents（新事件）
console.log（事件）
}
返回(
添加
{events.map（（项）=>(
{item.name}
))}
);
};
导出默认DragTableList
因为
newEvents
数组的指针从未更改。让newEvents=[…events]
这样做应该会起作用
react的第一条规则：不要改变状态。不管怎样，
让newState=oldState
的模式是如何得到如此广泛的延续的？我每秒钟都会看到这样的反应，我想通过做
让newState=oldState
我是在避免状态突变。使用setEvents不是在创建一个新的状态吗？每个人都这么认为，这不是真的。您刚刚以新名称提供了相同的引用。执行
之后，让newState=oldState
编写
console.log（newState==oldState）
。这是相同的参考！因此，通过修改
newState
，您正在改变现有状态（请参见上面的规则1）。通过执行
newState=[…oldState]
您将看到
newState！==oldState
，所以你现在可以自由地使用
newState
做你想做的事情，并且知道你没有变异状态。啊，好吧，这很有意义。谢谢@aa作为一个平头，排列操作符只做一个浅拷贝。因此，对于对象数组（因为对象是通过引用存储的），是的，数组本身将是一个新的数组，但数组中的对象将是每个数组中的相同对象，即编辑其中一个对象将在两个数组中更改它，因为它在内存中基本上是相同的对象