为什么这种情况state改变不刷新页面?

先说背景:页面上是一个巨大的flatlist,里面有3个item,我在第三个item内部的最下面也就是整个外层flatlist的最下面有一个flatlist,这个flatlist加载的是state中的数据,需要做上拉加载功能,因为内部的flatlist拿不到下拉事件,所以我在最外层写了上拉加载的方法,获取到数据放到state中,这样就改变了里面的数据。但是,虽然state变了,页面却没刷新。
后台打印确定state改变了

上个简要的代码

 constructor(props) {
        super(props)
        this.state = {
            data: [{"key": 1}, {"key": 2}, {"key": 3}],
        }

        this._changeData = this._changeData.bind(this);
    }

    _changeData(){
        this.setState({
            data :[{"key": 1}, {"key": 2}, {"key": 3},{"key": 4},{"key": 5}],
        })
    }

    _renderItem = ({item}) => {
        switch (item.key) {
            case 1:
                return (
                    <View>
                        <Text style={{height: 200}}>1111</Text>
                    </View>
                );
            case 2:
                return (
                    <View>
                        <Text style={{height: 200}}>ke2222y2</Text>
                    </View>
                );
            case 3:
                return (
                    //这个flatlist需要做上拉加载
                    <FlatList
                        data={this.state.data}
                     
                        renderItem={({item}) => <View style={{height: 200}}><Text>{item.key}</Text></View>}
                    />
                )
        }

    }

    render() {
        const {navigate} = this.props.navigation;
        let user = {'name': 'zy', age: 18}
        return (
            <View>
                <Text onPress={() => navigate('Two', {user: user})}>Home</Text>
                <FlatList
                    data={[{"key": 1}, {"key": 2}, {"key": 3}]}
                    renderItem={this._renderItem}
                    onEndReached={this._changeData}
                    onEndReachedThreshold={0.3}
                />
                <Text onPress={() => navigate('Two', {user: user})}>Home</Text>
            </View>
        )
    }

我写的这个demo是可以实现的
但是白天在项目里,那个数据是从网络获取过来的一个数组
我用一个新的数组a把state里的数组放进去,再把拿过来的数组也放进去,最后把这个数组a赋值给state
但发现并没有变化,页面没有刷新

阅读 8.7k
3 个回答

已经解决了
发现是flatlist的为问题
文档上有这样一句话:
给FlatList指定extraData={this.state}属性,是为了保证state.selected变化时,能够正确触发FlatList的更新。如果不指定此属性,则FlatList不会触发更新,因为它是一个PureComponent,其props在===比较中没有变化则不会触发更新。
加了这个属性之后就可以了

你只能通过setState去触发render。

this.setState({
    data: anotherData
})

不能通过直接赋值去触发

this.state.data = anotherData

虽然不知道你真正实现是怎样的,但我估计你用了后者这种方式。

新手上路,请多包涵

只能通过setState来重新render

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题