React JS数组删除对象问题求助：现有代码无法实现删除功能

问题重现 #

在React中尝试删除数组内的对象时无法生效，相关代码如下：

数组定义 #

export const SavedList = [
    {
      word: 'hello',
      translate: 'привет',
      note: 'say say'
    }
]

Menu组件（包含删除回调） #

class Menu extends Component {
  state = { 
    word: '',
    translate: '',
    note: '',
    data: SavedList,
  }
  deletePost =(id)=>{
    this.setState({
      data : this.state.data.filter((el)=> el.id !== id)
    })
  }
  render() {
    return (
          <div className="content">
            <Routes>
              <Route path="/" element={<Layout />}>
                  <Route path="saved" element={<Saved data={this.state.data} del={this.deletePost}/>}/>
              </Route>
            </Routes>
            <div>
            </div>
        </div>
    );
  }
}
export default Menu;

Saved组件（包含删除按钮） #

class Saved extends Component {
  render() {
    const sl = this.props.data.map((sl, id) => {
      return (
        <div className="saved-card" key={id}>
          <div className="content">
            <p>{id}</p>
            <p>{sl.word}</p>
            <p>{sl.translate}</p>
            <p>{sl.note}</p>
          </div>
          <div className="btn-block">
            <button
              onClick={() => this.props.del(id)}
              type="button"
              className="delete-btn"
            >
              delete
            </button>
          </div>
        </div>
      );
    });
    return (
      <div>
        <h2>Saved list</h2>
        <div className="saved-inner">
          <div className="saved-list">{sl}</div>
        </div>
      </div>
    );
  }
}

export default Saved;

问题原因 #

1. 数组元素缺少唯一id属性：SavedList中的对象没有id字段，导致deletePost函数里的el.id !== id条件永远为true，过滤后数组无变化。
2. 使用数组索引作为标识存在风险：即使勉强用索引匹配，数组元素顺序变化（如删除元素后）会导致索引重新排列，可能删除错误元素。

修复方案 #

步骤1：给数组对象添加唯一id #

修改SavedList，为每个对象添加唯一标识：

export const SavedList = [
    {
      id: 1, // 添加唯一id，新增元素需保证id唯一
      word: 'hello',
      translate: 'привет',
      note: 'say say'
    }
]

步骤2：修改Saved组件，传递对象id而非索引 #

在map循环中使用对象自身的id作为标识，并传递给删除函数：

class Saved extends Component {
  render() {
    const sl = this.props.data.map((sl) => {
      return (
        <div className="saved-card" key={sl.id}> {/* 用对象id作为key，更稳定 */}
          <div className="content">
            <p>{sl.id}</p> {/* 显示对象id */}
            <p>{sl.word}</p>
            <p>{sl.translate}</p>
            <p>{sl.note}</p>
          </div>
          <div className="btn-block">
            <button
              onClick={() => this.props.del(sl.id)} // 传递对象的id
              type="button"
              className="delete-btn"
            >
              delete
            </button>
          </div>
        </div>
      );
    });
    return (
      <div>
        <h2>Saved list</h2>
        <div className="saved-inner">
          <div className="saved-list">{sl}</div>
        </div>
      </div>
    );
  }
}

export default Saved;

步骤3：优化state初始化（可选但推荐） #

初始化state时复制原数组，避免直接引用常量导致的潜在问题：

state = { 
  word: '',
  translate: '',
  note: '',
  data: [...SavedList], // 展开运算符复制数组
}

完成以上修改后，删除功能即可正常工作。

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