Массив элементов состояния React.js не обновляется должным образом, даже не показывая никаких ошибок

Сначала, пожалуйста, посмотрите на картинку, чтобы понять, что происходит.

Проблема заключается в том, что при отмеченном флажке затем стирание текста, но я хочу обновить поле состояния из массива состояний, а функции приведены ниже.

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}
 />

Я не нахожу реального решения.

Спасибо

javascript reactjs

11.02.2019 04:50

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

253

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

В вашем коде вы говорите return item.done = true;. Это возвращает логическое значение вместо объекта элемента, и поэтому вы видите 1: true на своем снимке экрана. Вместо этого вы хотите что-то вроде этого:

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

Это создаст копию исходного объекта элемента, установит для его поля done значение true и вернет новый элемент.

11.02.2019 04:56

Эта строка в обратном вызове map:

return item.done = true;

сопоставит item с 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 };

});

Вероятно, было бы целесообразно не мутировать item напрямую здесь.

— 11.02.2019 04:58

@JKillian согласился

— 11.02.2019 05:03

11.02.2019 04:56