视图改变问题

Question

老师你好，我在做第四章的根据选择timespan改变拿到trending 数据的模块，遇到了下面的问题。 我相应时间（url）的数据能够拿到，但是页面的视图并没有更新为相应的数据。代码如下，对了我是否更新的模块做到了util包里面，没有问题。

1

<br>

   _load(timeSpan){

        console.log('time Span****************'+ timeSpan.searchText)

        this.setState({

            isloading: true,

        })

        var url = this._getUrl(timeSpan, this.props.tabLabel)

        this.dataUtil.fetchData(url)

            .then((result)=>{

                console.log('result:'+JSON.stringify(result))  //这边拿到了对应time span的数据

                this.setState({         

                    dataRepository:this.state.dataRepository.cloneWithRows(result.items),

                })

               console.log(this.state.dataRepository)  //这边也变成了新的数据

            }).catch(error=>{

                console.log(error)

        })

        this.setState({        isloading: false,  })

    }

下面是Trending tab 完整代码

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94

class TrendingTab extends Component{     constructor(props){         super(props)         this.dataUtil = new DataUtil(FLAG_STORAGE.flag_trending)         this.state={             isloading: false,             dataRepository : new ListView.DataSource({rowHasChanged: (r1, r2)=>r1 !== r2}),         }     }       componentDidMount(){ //组件加载完毕后调用数据         this._load(timeSpanTextArray[0])     }       //这个函数是 父组件有元素的改变影响子组件     componentWillReceiveProps(nextProps){ //传递过来的是要改变的数据         if(nextProps.timeSpan !==  this.props.timeSpan)             this._load(nextProps.timeSpan)       }       onRefresh() {         this._load(this.props.timeSpan);     }       selectItem(data){         console.log(data)         this.props.navigator.push({             component: WebViewPage,             params: {                 item: data,                 ...this.props             }         })       }     _load(timeSpan){         console.log('time Span****************'+ timeSpan.searchText)         this.setState({             isloading: true,         })         var url = this._getUrl(timeSpan, this.props.tabLabel)           this.dataUtil.fetchData(url)             .then((result)=>{                 console.log('result:'+JSON.stringify(result))                 this.setState({                     dataRepository:this.state.dataRepository.cloneWithRows(result.items),                     //isloading: false,                 })               }).catch(error=>{                 console.log(error)         })           this.setState({             isloading: false,         })       }     _getUrl(timeSpan,category){         return DATAURL + category + '?' + timeSpan.searchText     }       _renderRow(items){         return <TrendingCell                 data ={items}                 key={items.id}                 selectItem ={()=>this.selectItem(item)}             />     }       render(){         return (             <View style={styles.container}>                 <ListView                     dataSource={this.state.dataRepository}                     renderRow={(data) => this._renderRow(data)}                     refreshControl={                         <RefreshControl                             refreshing={this.state.isloading}                             onRefresh={()=>this.onRefresh()}                             colors={["#2196F3"]}                             tintColor={"#2196F3"}                             title={"努力加载中"}                             titleColor={"#2196F3"}                         />                     }                 />            </View>         )     }   }

Answer 1

CrazyCodeBoy 2017-03-24 09:20:34

将Cell中的：

render(){        

var data = this.state.data

...

改为var data = this.props.data试一下

Answer 2

CrazyCodeBoy 2017-03-20 09:21:27

建议检查一下this.dataUtil.fetchData(url)返回的数据是和上次加载的相同

• 提问者 oog #1

  老师你看下上面的标注，数据返回的是根据timeSpan改变过后的，state中数据也改变了，通过log我都看了。没改变的就是listview中显示的。

• 提问者 oog #2

  我刚才又试了一下，把treding Cell 改成一个View 直接显示{data.name},这样视图就能够更新。。。但是改回trending cell的方式还是不行。