React.js状态项数组无法正确更新，即使没有显示任何错误

Question

首先请查看图片以了解实际情况

问题被标记为复选框，然后清除了文本，但我想从状态数组更新状态字段，功能如下所示

state = {
    items: [
        { id: 1, text: 'Buy milk', done: true },
        { id: 2, text: 'Deed cat', done: false },
        { id: 3, text: 'Wash floor', done: false }
    ]
};

markItemDone = (i) => {
    this.setState(state => {
        const items = state.items.map((item) => {
            if (item.id === i){
                return item.done = true;
            } else {
                return item;
            }
        });

        return {
            items,
        };
    });
}

JSX：

 <input 
    type="checkbox" 
    onClick={() => this.markItemDone(item.id)}
    defaultChecked={item.done ? true : null}
 />

我没有找到实际的解决方案。

谢谢

Answer 1

在您的代码中，您说return item.done = true;。这返回的是布尔值而不是项目对象，因此为什么您在屏幕快照中看到1: true。相反，您需要这样的东西：

        if (item.id === i){
            return {
                ...item,
                done: true,
            };
        } else {
            return item;
        }

这将复制原始项目对象，将其done字段设置为true，然后返回新项目。

Answer 2

您的map回调中的这一行：

return item.done = true; 

将item映射到{{1}的undefined到item，其中id === i。如图所示，尝试修改map回调：

const items = state.items.map((item) => {

    /* Return copy of item. If id === item.id, add done : true to 
        mapped result. For all other cases, ensure done is undefined */ 
        return { ...item, done : id === item.id ? true : undefined };

});