Question

我想实现在平面列表滚动（onReachEnd）上加载更多（分页）数据。但是当我将新数据与先前数据（this.state.data）合并时，平面列表将项目渲染太多次让我们看看发生了什么：

这是我的PureComponent类：

class SampleComponent extends React.PureComponent {
    render() {
        return(
            <View key={this.props.id} style={{padding: 8}}>
                <Text bold style={{fontSize: UI.fontSize.lg}}>{this.props.title}</Text>
            </View>
        );
    }
}

我正在为每个项目（行）使用它。

我的应用组件如下：

class App extends React.Component {
    renderTimes;
    constructor(props) {
        super(props);
        this.state= {
            data: [],
        };
        this.renderTimes = 0;
    }

 componentDidMount() {
        this.fakeLoad();
    }


fakeLoad() {
        const start = this.state.data.length + 1;
        const data = [];
        for(let x = start; x <= start + 100; x++) {
            data.push({id: x.toString(), title: `Item #${x}`});
        }
        this.setState((prevState) => ({
            data: prevState.data.concat(data)
        }));
    }

 render() {
     return (
            <View style={{flex:1}}>
                <FlatList
                    data={this.state.data}
                    extraData={this.state.data}
                    renderItem={({item}) => {
                        this.renderTimes++;
                        console.log("render item " + item.id + " / " + this.renderTimes);
                        return (
                            <SampleComponent id={item.id} title={item.title}/>
                        );
                    }}
                    onEndReachedThreshold={0.5}
                    onEndReached={this.fakeLoad.bind(this)}
                />
            </View>
        );
}

}

fakeLoad方法将100个数据添加到当前状态.data 但是在console.log中，我收到了这个消息（只是日志的尾部）：

LOG渲染项目191/2503 LOG渲染项目192/2504 LOG渲染项目193/2505 日志渲染项目194/2506 LOG渲染项目195/2507 日志渲染项目196/2508 日志渲染项目197/2509 LOG渲染项目198/2510 日志渲染项目199/2511 LOG渲染项目200/2512 日志渲染项目201/2513 LOG渲染项目202/2514

这意味着我滚动到Item＃202，总渲染计数器显示2514。当然，我会一遍又一遍地看到＃1（第一个）的渲染项目。

我该怎么办？

感谢您的帮助...

Answer 1

FlatList将根据键重复使用该项目，您应添加

 keyExtractor={item => item.id}

在FlatList中的

。有关详细信息，您可以查看此link解释。

ReactNative FlatList大数据渲染问题（渲染太多次）

1 个答案: