React中如何通过唯一ID删除props.items内的对应支出项？

• React 中 props 是只读属性，无法直接修改父组件传递过来的props.items，你需要通过状态更新的方式修改列表数据源

场景1：当前组件维护支出列表状态 #

如果这个支出列表是当前组件自己维护的，先通过useState把传入的props.items初始化为组件内部状态：

import { useState } from 'react'

// 组件内部代码
const [expenses, setExpenses] = useState(props.items)

然后修改onRemoveExpense逻辑，用Array.filter方法过滤掉对应ID的项，更新状态：

const onRemoveExpense = (idNumber) => {
  // filter会返回新数组，保留ID不等于传入idNumber的所有项，符合React不可变更新要求
  setExpenses(prevExpenses => prevExpenses.filter(expense => expense.id !== idNumber))
}

渲染的时候用内部状态expenses代替props.items：

return (
  <ul className='expenses-list'>
    {expenses.map((expense) => (
      <ExpenseItem
        key={expense.id}
        value={expense.id}
        title={expense.title}
        amount={expense.amount}
        date={expense.date}
        removeExpense={onRemoveExpense}
      />
    ))}
  </ul>
)

场景2：支出列表由上层父组件维护 #

如果props.items是更上层组件传递的数据源，你需要上层组件同时传递修改列表的方法（比如命名为setExpenses），直接在删除逻辑里调用即可：

const onRemoveExpense = (idNumber) => {
  props.setExpenses(prev => prev.filter(expense => expense.id !== idNumber))
}

子组件注意事项 #

确认ExpenseItem内部的删除按钮点击事件能正确回传ID，示例逻辑：

// ExpenseItem 组件内部代码
<button onClick={() => props.removeExpense(props.value)}>删除支出</button>

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