У меня проблема с FlatList, я устанавливаю значения в массиве (этот массив создается внутри состояния), и мне нужно обновить в нем определенную строку, когда подпрограмма получает новое значение.
Я попытался зациклить state.data, проверив текущий ключ строки с помощью ключа из нового значения, но безуспешно.
Вот мой код:
import React, { PureComponent } from 'react';
import { View, Text, FlatList, ActivityIndicator } from 'react-native';
export default class App extends PureComponent {
state = {
data: [],
page: 1,
loading: false,
};
componentDidMount() {
this.loadData();
}
loadData = () => {
let { data, loading } = this.state;
data.push({ id: 1,
name: "Robert Garcia",
wins: 1 // I want to update this and preserve this line
});
loading = false;
this.setState({ data, loading });
}
renderItem = ({ item }) => {
return (
<View>
<Text style = {{ fontWeight: 'bold' }}>{item.name}</Text>
<Text>{item.wins}</Text>
</View>
)
}
render() {
return (
<FlatList
style = {{ marginTop: 15 }}
data = {this.state.data}
renderItem = {this.renderItem}
keyExtractor = {item => item.id.toString()}
onEndReachedThreshold = {0.1}
/>
);
}
Ваша проблема заключается в глубоком копировании и мелком копировании. В вашей функции loadData()
вы создали неглубокую копию this.state
, поэтому ваш новый объект на самом деле является старым, и чистый компонент не будет повторно отображаться. Чтобы исправить это, просто измените на:
let { data, loading } = JSON.parse(JSON.stringify(this.state));
(вы также можете использовать другие способы глубокого копирования объекта)