Пытаюсь удалить одну задачу, но когда я пытаюсь удалить все задачи в ответ

Почему удаляются все задачи, а не только та, на которую я нажал. Чтобы удалить каждую задачу, я использую метод массива filter(), и в моем случае он удаляет все задачи в моем списке. Что было бы лучшим вариантом для удаления отдельных элементов, если есть лучший вариант, или мне следует продолжать использовать filter()? Спасибо за помощь.

import React, { useState, useEffect } from "react";
import "./App.scss";

const Todo = () => {
  const [todos, setTodos] = useState([]);
  const [task, setTask] = useState("");

  const addTodo = (e) => {
    e.preventDefault();

    setTodos([...todos, task]);
    setTask("");
    // setId(Math.random())

    console.info(task, "(task)");
    console.info(todos, "(todos)");
  };

  const removeTodo = (task) => {
    setTodos(todos.filter((todo) => todo.task !== task));

    console.info(task);
  };

  // useEffect(() => {
  //   localStorage.setItem("todos", JSON.stringify(todos));
  // });

  return (
    <div>
      <h1>To-Do Tasks</h1>
      <form onSubmit = {addTodo}>
        <input value = {task} onChange = {(e) => setTask(e.target.value)} />
        <button>Add task</button>
      </form>
      {todos.map((todo) => (
        <div key = {todo.task} id = {todo.task}>
          <h4>{todo}</h4>
          <button onClick = {() => removeTodo(todo.task)}>X</button>
        </div>
      ))}
    </div>
  );
};

export default Todo;

Ваш код выглядит нормально :) попробуйте установить идентификатор не с помощью Math.random()..., а с помощью id:new Date().getTime().toString() . Я также хотел бы узнать о вашем объекте todo {id: task:"value"}, чтобы помочь вам лучше всего

Imran Rafiq Rather 14.12.2020 20:10

ваш todo - это просто массив строк, а не массив объектов, у вас нет .task там

Nikita Chayka 14.12.2020 20:11
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
2
147
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Если я не ошибаюсь, вы храните todos как простой массив, а не как объект, поэтому у вас возникла эта проблема.

Вместо этого используйте этот код:

Ваша функция removeTodo должна выглядеть так:

const removeTodo = (task) => {
    setTodos(todos.filter((todo) => todo !== task));
    console.info(task);
  };

и передайте элемент todo в removeTodo() вместо todo.task:

{todos.map((todo) => (
        <div key = {todo.task} id = {todo.task}>
          <h4>{todo}</h4>
          <button onClick = {() => removeTodo(todo)}>X</button>
        </div>
      ))}

todos — это массив строк. Ваша функция фильтра проверяет несуществующее свойство task. Либо добавьте todo в качестве объекта (setTodos([...todos, {task}])), либо проверьте todo напрямую (todos.filter((todo) => todo !== task)).

Другие вопросы по теме