如何在React中使用.filter方法删除项目？

Question

我正在构建Expense tracker，我需要添加功能以删除添加的项目。我正在尝试使用.filter方法来查看费用ID状态变量是否与参数匹配。然后我需要将函数传递给props

` const [expense, setExpense] = useState([]);
  const [expenseName, setExpenseName] = useState("");
  const [expenseAmt, setExpenseAmt] = useState();
.
.


 const removeHandler = id => {
    let expenses = expense.filter(e => {
      return e.id !== id;
    });
    setExpense({ expenses });
  };

.
.
 {expense.map((expense, index) => (
        <ListItem key={index} expense={expense} remove={removeHandler} />
      ))}


`

Answer 1

我相信您在setExpense通话中出错。您应该使用原始值（https://reactjs.org/docs/hooks-state.html#updating-state）来调用它，但是您要使用具有“ expenses”键且其值为expenses的对象来调用它。

尝试使用removeHandler：

const removeHandler = id => e => {
    const filteredExpense = expense.filter(e => {
      return e.id !== id;
    });

    setExpense(filteredExpense);
};

顺便说一句，您应该使用id作为渲染组件中的键，并像这样调用removeHandler来实际创建绑定到每个费用的绑定函数。id：

<ListItem key={expense.id} expense={expense} remove={removeHandler(expense.id)} />