Проблема с удалением объекта из массива. Как лучше сделать?(переделать)

Question

Работяги, добрый день! Пишу мини-проект на реакте, и столкнулся с такой проблемой как: не могу удалить объект из массива. Может быть что-то делаю на так?(Код приложу ниже). На данные момент при нажатии на кнопку не происходит ничего, просто ничего. А хотелось бы что бы при нажатии объект удалялся из массива. Как лучше сделать/переделать?

    export const data = [
    {
        id: '1',
        title: 'Finish the essay collaboration',
        isCompleted: false,
    },
    {
        id: '2',
        title: 'Read next chapter of the book',
        isCompleted: false,
    },
    {
        id: '3',
        title: 'Do homework for Thursday',
        isCompleted: false,
    },
   

    ]

import React from 'react'
import Check from './Check'
import Delete from './Delete'

const TodoItem = ({data, changeTodo, removeTodo}) => {
  return (
    <div className='flex items-center justify-between mb-4 rounded-2xl bg-zinc-800 p-5 w-full'>
      <button className='flex items-center' onClick={() => changeTodo(data.id)}>
        <Check isCompleted={data.isCompleted} />
        <span className={`${data.isCompleted ? 'line-through' : ''}`}>
          {data.title}
        </span>
      </button>
      <button onClick={() => removeTodo(data.id)}>
        <Delete />
      </button>
    </div>
  )
}

export default TodoItem

import React, { useState } from 'react'
import {data} from './todo.js'
import TodoItem from './item/TodoItem'


const Home = () => {
  const [todo, setTodo] = useState(data)

  const changeTodo = (id) => {
    const copy = [...todo]
    const current = copy.find(t => t.id === id)
    current.isCompleted = !current.isCompleted
    setTodo(copy)
  };

  const removeTodo = (id) => {
    console.log(`remove item ${id}`)
    setTodo([...todo].filter(t => t.id !== id));
  };


  return (
    <div className='text-white w-4/6 mx-auto'>
      <h1 className='font-bold text-2xl text-center mb-10'>Todo for junior</h1>
      {data.map(data => (
          <TodoItem key={data.id} todo={todo  } data={data} changeTodo={changeTodo} removeTodo={removeTodo}/>
      ))}
    </div>
  )
}

export default Home

Answer 1

У вас рендерятся данные из data:

   {data.map(data => (
      <TodoItem 
        key={data.id} 
        todo={todo  } 
        data={data} 
        changeTodo={changeTodo} 
        removeTodo={removeTodo}
      />
    ))}

А вы меняете todo, поэтому нет перерендера

Либо производите рендер из todo (todo.map(...)
Либо при удалении меняйте массив data (но тогда вам придётся позаботиться о том, чтобы менялся стейт, при изменении data (например через useEffect)). Гораздо логичнее было бы рендерить данные из todo

БЛОГ НА HUSL

Проблема с удалением объекта из массива. Как лучше сделать?(переделать)

Ответы (1 шт):