React列表项删除问题：点击按钮无法更新列表状态

你的代码存在两个关键问题导致列表状态无法更新，以下是具体问题分析和修复步骤：

1. 核心问题：渲染数据源错误 #

你在App组件中把原始静态数组ljudi传给了Lista组件，但实际维护状态的是people变量。即使setPeople更新了状态，Lista始终渲染的是未变化的原始数组，自然看不到删除效果。

2. 可选优化：对象引用比较的局限性 #

当前用personToDelete !== person进行过滤，虽然在这个场景下能工作（因为传递的是原始数组的对象引用），但如果后续数据来自API或其他非同一引用的场景，这个判断会失效。更健壮的方式是用对象的唯一标识（比如id）来比较。

修复后的完整代码 #

import React from 'react';
import { useState } from 'react';

const ljudi = [
  {
    id: '1',
    ime: 'Deni',
    prezime: 'Ivančok',
    dob: 24,
  },
  {
    id: '2',
    ime: 'Ana',
    prezime: 'Fišer',
    dob: 21,
  },
  {
    id: '3',
    ime: 'Fran',
    prezime: 'Fišer',
    dob: 21,
  },
];

function App() {
  const [people, setPeople] = useState(ljudi);

  const removePerson = (personToDelete) => {
    // 改用id过滤，适配更多数据场景
    const newPeople = people.filter(
      (person) => person.id !== personToDelete.id
    );
    setPeople(newPeople);
  };

  return (
    <>
      <h1>TIPKE</h1>
      {/* 传递状态变量people而非原始数组ljudi */}
      <Lista lista={people} removePerson={removePerson} />
    </>
  );
}

const Lista = ({ lista, removePerson }) =>
  lista.map(
    // 给循环的每个组件加唯一key，符合React要求
    (covjek) => <Covjek key={covjek.id} covjek={covjek} removePerson={removePerson} />
  );

const Covjek = ({ covjek, removePerson }) => {
  return (
    {/* 给每个列表项的div加唯一id，避免重复 */}
    <div id={`lista-${covjek.id}`}>
      <ul>
        <li>{covjek.id}</li>
        <li>{covjek.ime}</li>
        <li>{covjek.prezime}</li>
        <li>{covjek.dob}</li>
      </ul>
      <button onClick={() => removePerson(covjek)}>
        Delete
      </button>
    </div>
  ); 
};

export default App;

额外修正说明 #

• 调整了key的位置：React要求循环渲染的元素必须有唯一key，且应放在循环的最外层组件上（这里是Covjek），而非内部的ul标签。
• 给每个列表项的div添加了唯一id：原始代码中所有列表项的div都使用id="lista"，这违反了HTML中id唯一性的规则。

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