Reactjs 未从数组中删除的项

我的代码有问题，无法从数组中删除特定项

import React, { useState } from "react";
import Outcomeitem from "./Outcomeitem";
import { v4 as uuidv4 } from "uuid";

const Outcome = (props) => {
  const [input, setInput] = useState(0);
  const [expense, setExpense] = useState("");
  const [outcomes, setOutcomes] = useState([]);

  const setInputHandler = (e) => {
    e.preventDefault();
    props.onChangeHandlerOutcome(input);

    setOutcomes([
      ...outcomes,
      {
        name: expense,
        amount: input,
        id: uuidv4(),
      },
    ]);
  };

  const deleteOutcome = (id) => {
    setOutcomes(outcomes.filter((outcome) => outcome.id !== id));
  };

  return (
    <div>
      <form onSubmit={setInputHandler}>
        <label>
          Outcome
          <input
            type="text"
            name="name"
            onChange={(e) => setExpense(e.target.value)}
          ></input>
          <input
            type="text"
            name="name"
            onChange={(e) => setInput(parseInt(e.target.value))}
          ></input>
        </label>
        <input type="submit" value="Submit"></input>
      </form>
      <div>
        <div>
          {outcomes.map((outcome) => (
            <Outcomeitem
              name={outcome.name}
              amount={outcome.amount}
              deleteOutcome={(id) => deleteOutcome(id)}
            />
          ))}
        </div>
      </div>
    </div>
  );
};

export default Outcome;

import React，{useState}来自“React”；
从“/Outcomeitem”导入结果项；
从“uuid”导入{v4 as uuidv4}；
常量结果=（道具）=>{
const[input，setInput]=useState（0）；
const[expense，setExpense]=使用状态（“”）；
const[outcouts，setoutcouts]=useState（[]）；
常量setInputHandler=（e）=>{
e、 预防默认值（）；
props.OnChangeHandlerOutput（输入）；
设定结果([
…结果，
{
名称：费用，
金额：输入，
id:uuidv4（），
},
]);
};
常量deleteOutput=（id）=>{
setOutlets（outlets.filter（（outlets）=>outlets.id！==id））；
};
返回(
结果
设置费用（如target.value）}
>
setInput（parseInt（e.target.value））}
>
{结果.map（（结果）=>(
删除结果（id）}
/>
))}
);
};
出口违约结果；

从“React”导入React；
const Outcomeitem=（{name，amount，deleteOutcome，id}）=>{
返回(

{name}:-{amount}${'}
deleteOutput（id）}>Delete

);
};
导出默认结果项；

我确实觉得这与我在输入和数量上使用useState有关，但我不能完全确定

我没有收到任何类型的错误（除了唯一的关键道具），它只是不做任何事情

---

非常感谢您的帮助，提前谢谢

您永远不会将

id

作为道具传递到此处

<Outcomeitem
    name={outcome.name}
    amount={outcome.amount}
    deleteOutcome={(id) => deleteOutcome(id)}
 />

deleteOutput（id）}
/>

---

或者，您可以将

deleteOutcome={（）=>deleteOutcome（outcome.id）}

作为道具传递，然后直接从

Outcomeitem

调用

deleteOutcome

，我已经找到了它不起作用的原因

在结果中，我忘记传递ID道具：

            <Outcomeitem
              name={outcome.name}
              amount={outcome.amount}
              deleteOutcome={(id) => deleteOutcome(id)}
            />

deleteOutput（id）}
/>

添加代码。为了更好地跟踪，请在这里添加您的更改-。嘿，伙计，我已经添加了代码。泰！这是正确的。将

id={obect.id}

传递给

Outcomeitem

应该非常适合您。

            <Outcomeitem
              name={outcome.name}
              amount={outcome.amount}
              deleteOutcome={(id) => deleteOutcome(id)}
            />