如何在 React-Native Flatlist 中收到新数据时更新特定行

Question

我有一个 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}
            />
        );
    }

Answer 1

你的问题是关于深拷贝和浅拷贝。在您的 loadData() 函数中，您创建了 this.state 的浅表副本，因此您的新对象实际上是旧对象，而纯组件不会 re-render。要解决此问题，只需更改为：

let { data, loading } = JSON.parse(JSON.stringify(this.state));

（你也可以使用其他方式深拷贝对象）

如何在 React-Native Flatlist 中收到新数据时更新特定行

How to update a specific line when receive a new data in React-Native Flatlist

javascript

react-native

react-native-flatlist