javascript - Why does the page not refresh when the state changes in this case?
曾经蜡笔没有小新
曾经蜡笔没有小新 2017-06-06 09:52:50
0
2
651

Let’s talk about the background first: there is a huge flatlist on the page, with 3 items in it. I have a flatlist at the bottom of the third item, which is also the bottom of the entire outer flatlist. This flatlist loads state. The data in requires a pull-up loading function, because the internal flatlist cannot get the pull-down event, so I wrote a pull-up loading method in the outermost layer, obtained the data and put it into the state, thus changing the data inside. . However, although the state has changed, the page is not refreshed.
Print in the background to confirm that the state has changed

Last brief code

 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>
        )
    }

The demo I wrote is achievable
But during the day in the project, the data is an array obtained from the network
I use a new array a to put the array in the state, and then Put the array you brought in, and finally assign the array a to state
but found that there was no change and the page was not refreshed

曾经蜡笔没有小新
曾经蜡笔没有小新

reply all(2)
大家讲道理

By the way, is there any better way

漂亮男人

You can only trigger render through setState.

this.setState({
    data: anotherData
})

Cannot be triggered by direct assignment

this.state.data = anotherData

Although I don’t know how you actually implemented it, I guess you used the latter method.

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template