化解上文，在更新了状态中的对象后，又如何更新状态中的数组呢？

数组在 JavaScript 中是可变的，但在将它们存储在状态中时，你应该将它们视为不可变的。就像对象一样，当你想更新存储在状态中的数组时，你需要创建一个新数组（或复制现有数组），然后设置状态以使用新数组。

React 状态中的数组

React 状态中的数组时，你需要避免使用左栏中的方法，而更优先右栏中的方法。

不幸的是，slice 和 splice 的命名相似但差别很大：

• slice 允许你复制一个数组或其中的一部分。
• splice 改变数组（插入或删除项目）。

在 React 中，你将更频繁地使用 slice（没有 p！），因为你不想改变状态中的对象或数组。

push添加方法

{ 原数组前添加 }
setArtists([  
    { id: nextId++, name: name },  
    ...artists // Put old items at the end  
]);

{ 原数组后添加 }
setArtists([
  ...artists,
  { id: nextId++, name: name }
]);

filter删除

从数组中删除项目的最简单方法是将其过滤掉。

  <ul>
    {artists.map(artist => (
      <li key={artist.id}>
        {artist.name}{' '}
        <button onClick={() => {
          setArtists(
            artists.filter(a =>
              a.id !== artist.id
            )
          );
        }}>
          Delete
        </button>
      </li>
    ))}
  </ul>
  
 setArtists(  
    artists.filter(a => a.id !== artist.id)  
);

`filter` 不会修改原始数组