视图改变问题

来源:

oog

2017-03-19

老师你好,我在做第四章的根据选择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>
        )
    }

}


写回答

2回答

CrazyCodeBoy

2017-03-24

将Cell中的:

render(){        

var data = this.state.data

...

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


0
0

CrazyCodeBoy

2017-03-20

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

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

React Native技术精讲与高质量上线App开发

一个真实的上线项目,一次完整的开发过程,全面掌握React Native技术

1577 学习 · 727 问题

查看课程