反应本机重新渲染导致视图滚动到顶部-我的键在渲染之间是不是发生变化？

Posted 2023-02-22

【中文标题】反应本机重新渲染导致视图滚动到顶部-我的键在渲染之间是不是发生变化？

【英文标题】：React native re-render causes view to scroll to top - Do my keys change between renders?反应本机重新渲染导致视图滚动到顶部-我的键在渲染之间是否发生变化？

【发布时间】：2018-11-25 11:07:44

【问题描述】：

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

我已经阅读了一段时间并且 event.preventDefault（有时建议）不起作用，我相信我的问题是渲染之间相应元素的键/父树更改。我确实为每个项目提供了其 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)

【问题讨论】：

要修复的两件事。 1）不要直接改变状态。使用 setState。 2) 使用 FlatList 中的 keyExtractor 属性。不要手动添加密钥。

使用 keyExtractor 也无济于事，为什么我不使用 setState 直接改变状态是因为当我设置状态时，重新渲染会使视图滚动到顶部。那是我的问题。

【参考方案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>
        );