删除反应 state 的数组元素

Question

I know this is not react problem and I suck at coding. Can somebody tell me why my code is running so strange!

my project is a simple Todo List. I have 3 components.

1. Main app component
2. TodoList component
3. TodoItem component

I want to delete a TodoItem when the user clicks the delete icon.

this is app.js :

const [todoLists, setTodoLists] = useState([]);

function setTodoList(index, setFunction) {
    setTodoLists(prevTodoLists => {
        const newTodoLists = [...prevTodoLists]
        newTodoLists[index] = {...setFunction(newTodoLists[index])};
        console.log([...newTodoLists])
        return [...newTodoLists];
    });
}

return (
    <section className="todoContainer" id="todocontainer">
        {
            todoLists.map((todoList, index) => {
                return <TodoList todoList={todoList} index={index} setTodoList={setTodoList} />;
            })
        }
    </section>
);

This is TodoList.js

function handleDeleteTodo(cardIndex) {
    setTodoList(index, prevTodoList => {
        const newTodoList = {...prevTodoList};
        newTodoList.cards.splice(cardIndex, 1);
        return {...newTodoList};
    });
}
return (
    <section className="body" ref={todosBodyRef} >
        {
            todoList.cards.map((todo, cardIndex) => {
                return <TodoItem listIndex={index} cardIndex={cardIndex} todo={todo} handleDeleteTodo={handleDeleteTodo} />
            })
        }
    </section>
);

This is TodoItem.js

function deleteButtonOnClick() {
    handleDeleteTodo(cardIndex);
}
return (
    <>
        <p>{todo.name}</p>
        <div className="controls">
            <i className="far fa-trash-alt deleteCard" onClick={deleteButtonOnClick}></i>
        </div>
    </>
)

And when I Click On Delete Icon if TodoItem is the last TodoItem it deletes perfectly but if it's not the last item it will delete the next 2 Todoitems instead of itself.

I don't know what I did wrong. It will be great if someone explains to me what is happening:_(

Edit: I added this if statement at handleDeleteTodo :

if (newTodoList.cards == prevTodoList.cards) {
    console.log("True"); // It means both cards references are Same.
}

And it logged True. This means both cards references are same and I have to clone that as well.

Is there anyways to solve this problem without cloning cards Array? Because I am cloning whole todoList Object and I don't want to clone cards too.

Answer 1

I found the problem!

I was using a nested JS object and I was cloning it using spread operator. ( That is a shallow copy and it will not clone objects inside of objects! )

So I used rfdc and deep cloned my object using it. like this in TodoList.js :

import clone from 'rfdc/default';
function handleDeleteTodo(cardIndex) {
    setTodoList(index, prevTodoList => {
        const newTodoList = clone(prevTodoList); // This is where cloning happens
        newTodoList.cards.splice(cardIndex, 1);
        return newTodoList;
    });
}