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;
    });
}

删除反应状态的数组元素

1 个答案: