视图改变问题

Question

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

   _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 完整代码

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的方式还是不行。