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的浅表副本，因此，新对象实际上是旧对象，并且纯组件不会重新呈现。要解决此问题，只需更改为：

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

（您还可以使用另一种深度复制对象的方式）

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

1 个答案: