React函数组件使用useState无法删除列表项该如何解决

问题点 #

1. 数组方法误用：slice 方法不会修改原数组，仅返回裁剪后的新数组，你写的person.slice(personIndex, 1)没有赋值，完全不生效。建议用filter生成新数组，无需操作拷贝的原数组。
2. 状态更新丢失字段：你声明的personArray状态是包含person和showPerson的对象，调用setPersonArray时仅传入person字段，会直接覆盖原有状态，导致showPerson属性丢失，列表会直接隐藏。
3. 缺少useState导入：React 函数组件使用useState必须先从react包导入该API。
4. 列表渲染未加key属性：React要求列表项必须有唯一key，否则会有性能问题和渲染异常。

修正后代码 #

import React, { useState } from 'react';
import './style.css';
import Person from './Person/Person';

const App = (props) => {
  const [personArray, setPersonArray] = useState({
    person: [
      { name: 'mg mg', age: 20 },
      { name: 'justin', age: 17 },
      { name: 'helen', age: 12 },
    ],
    showPerson: false,
  });

  const showNameHandler = () => {
    // 展开原有状态，仅修改showPerson字段
    setPersonArray({
      ...personArray,
      showPerson: !personArray.showPerson,
    });
  };

  const deletePerson = (personIndex) => {
    // 过滤掉对应下标的项，直接生成新数组
    const updatedPersons = personArray.person.filter((_, index) => index !== personIndex);
    setPersonArray({
      ...personArray,
      person: updatedPersons
    });
  };

  let persons = null;
  if (personArray.showPerson) {
    persons = (
      <div>
        {personArray.person.map((pp, index) => {
          return (
            <Person 
              key={index}
              click={() => deletePerson(index)} 
              name={pp.name} 
              age={pp.age} 
            />
          );
        })}
      </div>
    );
  }
  return (
    <div>
      <div className="wrapper">
        <h1>Hello React</h1>
        {persons}
        <button onClick={showNameHandler}>Show Name</button>
      </div>
    </div>
  );
};

export default App;

优化建议 #

建议把不同类型的状态拆分成独立的useState声明，避免更新时需要反复展开原有对象，降低出错概率：

// 拆分后状态声明
const [personList, setPersonList] = useState([
  { name: 'mg mg', age: 20 },
  { name: 'justin', age: 17 },
  { name: 'helen', age: 12 },
]);
const [showPerson, setShowPerson] = useState(false);

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