reactjs - React native 重新渲染导致 View 滚动到顶部 - 我的键在渲染之间会改变吗？

Question

我正在使用 react native、redux 和 flatlist。我渲染 10 个项目，然后在单击时获取/渲染接下来的 10 个项目(加载更多)。我的问题是，当我使用 setState(增加页面计数器)(这就是为什么我不在我的代码中使用 setstate)来获取更多项目(我使用分页)或询问我是否正在获取(获取时为真 -> 显示加载sign, false when fetched -> showing items), 触发重新渲染，我的 View 滚动到顶部。

我已经阅读了一段时间，但 event.preventDefault(有时建议)不起作用，我相信我的问题是渲染之间相应元素的键/父树发生变化。我确实为每个项目提供了其 ID 的 key ，该 ID 始终是唯一的。我做错了吗？或者还有什么可能导致这种情况？谢谢!

class App extends React.Component {  
    state = {
        page : 0
    }
    componentDidMount() {
        this.props.fetchData(0)
        this.state.page++;
    }        
    load = () => {
        this.props.fetchData(this.state.page);
        this.state.page++;
    }    
    renderRow = ({item}) => {
        return (
            <Item
                key={item.id}
                coin={item}
            />
        )
    }
    renderButton() {
        return <Button
            title="Load more"
            onPress={this.load}
        />
    }    
    render() {
        if (this.props.isFetching) {
            return (
                <View>
                  <Text>Loading</Text>
                </View>
            )
        }
        return (
            <View style={styles.container}>
                <FlatList
                    style={{width: '100%'}}
                    data={this.props.data}
                    renderItem={this.renderRow.bind(this)}
                    ListFooterComponent={this.renderButton.bind(this)}
                />
            </View>
        );
    }    
}    
mapStateToProps = state => {
    return {
        isFetching: state.data.isFetching,
        data: state.data.data    
    }
}    
export default connect(mapStateToProps, {fetchData})(App)

Answer 1

嘿，像下面这样改变你的渲染方法返回:

return (
          { this.state.isFetching && <View> <Text>Loading</Text> </View>}

            <View style={styles.container}>
                <FlatList
                    style={{width: '100%'}}
                    data={this.props.data}
                    renderItem={this.renderRow.bind(this)}
                    ListFooterComponent={this.renderButton.bind(this)}
                />
            </View>
        );