javascript - 為什麼這種情況state改變不刷新頁面?
曾经蜡笔没有小新
曾经蜡笔没有小新 2017-06-06 09:52:50
0
2
649

先說背景:頁面上是一個巨大的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
但發現並沒有變化,頁面沒有刷新

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

全部回覆(2)
大家讲道理

順便問一下有什麼更好的方法

漂亮男人

你只能透過setState去觸發render。

this.setState({
    data: anotherData
})

不能透過直接賦值去觸發

this.state.data = anotherData

雖然不知道你真正實現是怎樣的,但我估計你用了後者這種方式。

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板