javascript - 为什么这种情况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需要做上拉加载 <FlatListdata={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但发现并没有变化，页面没有刷新

问题解答

顺便问一下有什么更好的方法

你只能通过setState去触发render。

this.setState({ data: anotherData})

不能通过直接赋值去触发

this.state.data = anotherData

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