Элемент не удаляется из массива

У меня проблема с моим кодом, когда я не могу удалить определенный элемент из своего массива.

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 from "react";

const Outcomeitem = ({ name, amount, deleteOutcome, id }) => {
  return (
    <div>
      <div>
        <li>
          {name} : -{amount}${" "}
          <button onClick={() => deleteOutcome(id)}>Delete</button>
        </li>
      </div>
    </div>
  );
};

export default Outcomeitem;

У меня есть ощущение, что это как-то связано со мной, использующим useState для ввода и суммы, но я не совсем уверен.

Я не получаю никаких ошибок (кроме уникального ключевого реквизита), он просто ничего не делает.

буду признателен за любую помощь, заранее спасибо!


person NewbieAeg    schedule 30.09.2020    source источник
comment
добавьте код codesandbox.io. для трассировки лучше   -  person A.R.SEIF    schedule 30.09.2020
comment
пожалуйста, добавьте свои изменения здесь - codesandbox.io/s/thirsty -lalande-2m8j1?file=/src/outcome.js.   -  person Sarun UK    schedule 30.09.2020
comment
Эй, чувак, я добавил код. ты!   -  person NewbieAeg    schedule 01.10.2020


Ответы (2)


Вы никогда не передаете id в качестве реквизита здесь

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

В качестве альтернативы вы можете просто передать deleteOutcome={() => deleteOutcome(outcome.id)} в качестве реквизита, а затем напрямую вызвать deleteOutcome из Outcomeitem.

person Giorgi Moniava    schedule 30.09.2020
comment
Это правильно. Передача id={obect.id} в Outcomeitem должна отлично сработать для вас. - person Dakshraj Sharma; 30.09.2020

Я понял, почему это не сработает

в Outcome я забыл передать реквизит ID:

            <Outcomeitem
              name={outcome.name}
              amount={outcome.amount}
              deleteOutcome={(id) => deleteOutcome(id)}
            />
person NewbieAeg    schedule 02.10.2020