Прежде всего позвольте мне объяснить немного структуры. Я использую redux useSelector для получения состояния определенного хранилища, в этой конкретной проблеме я использую два хранилища, которые
users = useSelector(state => state.usersKey.userMaster);
stories = useSelector(state => state.storiesKey.stories);
users
хранят пользовательские данные, такие как идентификатор пользователя, имена, аватары. в то время как stories
хранит медиафайлы и идентификатор пользователя, которому принадлежит эта история (подумайте об истории Instagram). Я использую базу данных Firebase Realtime в качестве хранилища.
Итак, у меня есть этот FlatList, в котором перечислены компоненты "Stories", состоящие из круга, в котором должен быть аватар пользователя, и имя пользователя под ним. Плоский список получает свои данные из магазина stories
. В подпункте name
я выбираю имя пользователя, открывая хранилище users
и сопоставляя сохраненный там uid с тем, который хранится в хранилище stories
. Это работает так, как задумано, так как имена отображаются правильно.
<FlatList
showsHorizontalScrollIndicator={false}
horizontal
data={stories}
keyExtractor={item => item.id}
renderItem={itemData => (
<Stories
name={users
.filter(prod => prod.uid === itemData.item.id)
.map(e => e.name)}
avatar={users
.filter(prod => prod.uid === itemData.item.id)
.map(e => e.avatar)}
onPress={() => {
carouselHandler(itemData.item.id);
}}
/>
)}
/>
Я подумал, что этот метод будет работать также с пропеллером avatar
, поэтому я сделал то же самое, но неожиданно он дал мне ошибку, которая читает Error while updating property 'src' of a view managed by: RCTImageView null Value for uri cannot be cast from ReadableNativeArray to String
несмотря на то, что ему удалось успешно извлечь uri / ссылку на файл просто отлично. Я проверил с помощью оповещений, и все они показывают правильные ссылки
это Stories
компонент
<View style={styles.storiesContainer}>
<View style={styles.storyItemContainer}>
<TouchableOpacity onPress={props.onPress}>
<Image style={styles.userImage} source={{ uri: props.avatar }} />
</TouchableOpacity>
<View style={styles.text}>
<Text numberOfLines={1}>{props.name}</Text>
</View>
</View>
</View>
Заранее спасибо.