Показать новое состояние атрибута для каждого элемента списка

Question

Я отображаю список атрибутов (художников) в React.Во время рендеринга для каждого элемента списка необходимо сделать отдельный HTTP-запрос для отображения дополнительной информации (жанров).Чтобы решить эту проблему, я предварительно поместил пустой массив в это состояние - чтобы обновить это состояние для каждого элемента во время рендеринга:

let newState = Object.assign({}, this.state);
          newState.categoryList[item.id] = names; // names is a single string containing all genres
          this.setState(newState);

В конце концов, я пытаюсь отобразить жанры (которые помещаются водна строка) в текстовом поле, после вызова метода в JSX: {this._getCategories(item)}.

/* this._getCategories is called to make an additional HTTP request for
         every item in the list. this.state.categoryList[item.id] should contain
         the required value (string). */
        {this._getCategories(item)}
        <Text style={styles.categories}>this.state.categoryList[item.id]</Text>

Я сделал воспроизводимую версию на Expo.io, которую можно найти здесь: Отрывок .Чтобы упростить понимание, я добавил дополнительные комментарии к каждой части кода.

Редактировать

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

Answer 1

Если проблема, с которой вы столкнулись, заключается в том, что вы не видите, что вещи перерисовываются после завершения ваших HTTP-запросов, это потому, что вы нарушаете правило React здесь:

// Incorrect
let newState = Object.assign({}, this.state);
newState.categoryList[item.id] = names; // names is a single string containing all genres
this.setState(newState);

Всякий раз, когда вы устанавливаете новое состояние на основе существующего состояния (как в вашем первом блоке кода), вы должны использовать версию обратного вызова setState и объект состояния, который он передает вам;вы не можете сделать это, как вы сделали выше; документы .

Вы сказали, что categoryList - это массив.Из вашего описания это звучит как массив разреженный (по крайней мере, на начальном этапе).При установке состояния вы должны сделать копию массива, содержащего изменения, вы не можете напрямую изменить его.Поскольку он кажется разреженным, мы не можем сделать это обычным способом (с расширенной нотацией в литерале), вместо этого мы должны использовать Object.assign:

// Correct
this.setState(({categoryList}) => ({categoryList: Object.assign([], categoryList, {[item.id]: names})}));

или, возможно, более ясный, многословныйверсия:

this.setState(state => {
    const categoryList = Object.assign([], state.categoryList);
    categoryList[item.id] = names;
    return {categoryList};
});