如何从useState钩子的对象数组中删除指定数量的开头元素

先提几个细节：

• 原代码里function x()的括号未闭合，且name字段的a/b/c需要用引号包裹（否则会被视为未定义变量）
• delete是JavaScript关键字，不能用作函数名，这里改用removeFirstN

实现思路 #

因为初始状态list是null，所以删除函数里要先判断当前list是否为有效数组，避免调用数组方法时报错。利用数组的slice方法，slice(n)会返回从索引n到数组末尾的新数组，刚好实现删除前n个元素的需求，同时符合React状态不可变的要求。

完整代码示例 #

import { useState } from 'react';

function YourComponent() {
  const [list, setList] = useState(null);

  // 初始化数组的函数（修正原代码语法问题）
  function initList() {
    setList([
      { id: 1, name: 'a' },
      { id: 2, name: 'b' },
      { id: 3, name: 'c' },
    ]);
  }

  // 从开头删除指定数量元素的函数
  function removeFirstN(count) {
    // 边界判断：仅当list是数组且count为非负数时执行
    if (!Array.isArray(list) || count < 0) return;
    // 用slice生成新数组，更新状态
    setList(list.slice(count));
  }

  return (
    <div>
      <button onClick={initList}>初始化列表</button>
      <button onClick={() => removeFirstN(2)}>删除前2个元素</button>
      <pre>{JSON.stringify(list, null, 2)}</pre>
    </div>
  );
}

效果说明 #

调用removeFirstN(2)时，list.slice(2)会返回[{id:3,name:'c'}]，通过setList更新状态后即可得到目标结果。边界判断能避免list为null或传入负数时出现错误。

内容的提问来源于stack exchange，提问作者Medusa