У меня есть массив объектов, отображаемых через 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}
/>
);
}
2 ответа
Я думаю, что объекты разговора изменяются сторонней библиотекой. Возможно, мне придется переосмыслить, как я храню и обновляю эту информацию в моем редукторе ...
Похоже, вы либо где-то мутируете данные, либо неправильно подставляете данные 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
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript/JS) и его различных диалектах/реализациях (кроме ActionScript). Обратите внимание, что JavaScript — это НЕ Java. Включите все теги, относящиеся к вашему вопросу: например, [node.js], [jQuery], [JSON], [ReactJS], [angular], [ember.js], [vue.js], [typescript], [стройный] и т. д.