删除反应状态的数组元素

Question

我知道这不是反应问题，我的编码很烂。谁能告诉我为什么我的代码运行这么奇怪！

我的项目是一个简单的待办事项列表。我有 3 个组件。

主要应用组件
TodoList 组件
TodoItem 组件

我想在用户单击删除图标时删除一个 TodoItem。

这是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>
);

这是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>
);

这是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>
    </>
)

当我点击删除图标时，如果 TodoItem 是最后一个 TodoItem，它会完美删除，但如果它不是最后一个项目，它将删除接下来的 2 个 Todoitem 而不是它自己。

我不知道我做错了什么。如果有人向我解释发生了什么，那就太好了:_(

编辑： 我在 handleDeleteTodo:

添加了这个 if 语句

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

它记录了 True。这意味着两张卡片参考相同，我也必须克隆它。

有没有不用克隆cards数组就可以解决这个问题的方法？因为我正在克隆整个 todoList 对象而且我也不想克隆卡片。

Answer 1

我找到问题了！

我正在使用一个嵌套的 JS 对象，并且我正在使用扩展运算符克隆它。（这是一个浅拷贝，它不会在对象内部克隆对象！）

所以我使用了 rfdc 并使用它深度克隆了我的对象。像这样 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;
    });
}

删除反应状态的数组元素

Deleting an array element of a react state

javascript

setstate

reactjs

react-hooks

react-state