У меня есть массив объектов, отображаемых через React Native FlatList. Каждый элемент в списке отображает настраиваемый компонент. У каждого объекта есть свойство unreadMessageCount, которое возвращает число. Если это число больше 0, то моему пользовательскому компоненту передается логический флаг, который отображает небольшой значок, указывающий на наличие непрочитанных сообщений, если это логическое значение истинно. Когда пользователь нажимает на настраиваемый компонент, отображается список сообщений, и все сообщения (беседа) помечаются как прочитанные. Массив объектов обновляется, и Flatlist повторно отображает новый список (подтвержден).

А теперь самое странное. В функции элемента визуализации, где я определяю, больше ли unreadMessageCount, чем 0, сам объект имеет правильное значение для свойства, но вызов свойства возвращает предыдущее значение. Например, если я console.log(object) могу проверить свойство объекта unreadMessageCount и вижу правильное значение 0, однако в следующей строке кода, если console.log(object.unreadMessageCount) оно не показывает правильное значение 0, а отображает предыдущее значение. Как это вообще возможно?

Я также попытался реализовать логику unreadMessageCount > 0 в пользовательском компоненте с тем же результатом.

renderItem({item}) {
  console.log('item', item); //  { unreadMessageCount: 0, ... }
  console.log('item.unreadMessageCount', item.unreadMessageCount);  // 1

  return (
    <ConversationCard
      conversation={item}
      showUnreadBadge={item.unreadMessageCount > 0}
    />
  );
}

render() {
  return (
    <FlatList
      data={this.props.conversations}
      renderItem={this.renderItem}
      keyExtractor={item => item.url}
    />
  );
}
0
drquiz 29 Окт 2019 в 20:00

2 ответа

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

0
drquiz 30 Окт 2019 в 18:38

Похоже, вы либо где-то мутируете данные, либо неправильно подставляете данные FlatList (правильно ли я понимаю, что вы используете тот же FlatList для отображения списка разговоров и списка сообщений?)

Причина, по которой ваши два console.logs ведут себя по-разному, заключается в том, что первый из них регистрирует объект, и если вы измените этот объект после регистрации, а затем проверите его, вы увидите новые данные внутри объекта, а не те, которые были там в время регистрации. Вы можете подтвердить это, заменив console.log('item', JSON.stringify(item)) этим console.log('item', item)

Поэтому убедитесь, что вы нигде не изменяете свои данные, и используйте опору extraData FlatList https://facebook.github.io/react-native/docs/flatlist#extradata

0
Max 29 Окт 2019 в 20:12
Спасибо за ответ! Я использую FlatList только для рендеринга массива объектов разговора. Каждый компонент ConversationCard при нажатии открывает полноэкранный оверлей, который отображает в нем отдельный FlatList. Что касается изменения данных, я тоже подозревал, что это тоже, но я не думаю, что это так, но, возможно, я что-то упускаю. Мой редуктор для получения массива разговоров (изначально и после внесения обновлений, т. Е. Пометки разговора как прочитанного) выглядит так: `return {... state, беседы: action.payload.conversations,}`
 – 
drquiz
30 Окт 2019 в 03:32