重构Item组件导致下拉刷新内容无法将最新数据展示到列表首页,而是加到List底部

来源:6-7 列表页点赞功能

石头作坊

2016-10-12

重构Item组件导致下拉刷新内容无法将最新数据展示到列表首页,而是加到List底部

写回答

5回答

Scott

2016-10-12

修改 state 之前,把最新的数据,插入到数组的最前头,然后再重新生成一个新的 datasource 替换到 state 试试看,这个是数据顺序的问题

0
4
Scott
回复
石头作坊
从服务器端可以设置下返回的数据条数,这个参数值应该是从客户端传过去的,服务器端判断下合法性,再截取相应数量的数据数返回即可
2016-10-12
共4条回复

LarryHuang

2017-12-31

还有一个原因,我用的是 es6 的语法,除了在 componentDidMount 方法中初始化接受 row 参数外,每次下拉刷新,还需要在 componentWillReceiveProps 方法中接受 nextProps 参数。

componentWillMount() {
  console.log('---- component will mount: ')
  console.log(this.props.row)
  this.setState({
    row: this.props.row,
    up: this.props.row.voted
  })
}

componentWillReceiveProps(nextProps) {
  console.log('---- component will receive props: ')
  console.log(nextProps.row)
  this.setState({
    row: nextProps.row,
    up: nextProps.row.voted
  })
}


0
0

LarryHuang

2017-12-31

已解决。在 rowHasChanged 方法中,少写了个 return。

constructor() {
super();
let ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => { return r1 !== r2 } });
this.state = {
dataSource: ds.cloneWithRows([]),
onLoading: false,
onRefreshing: false,
}
}


0
0

LarryHuang

2017-12-31

碰到了同样的问题,一直没解决

0
1
LarryHuang
constructor() { super(); let ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => { return r1 !== r2 } }); this.state = { dataSource: ds.cloneWithRows([]), onLoading: false, onRefreshing: false, } }
2017-12-31
共1条回复

石头作坊

提问者

2016-10-12

if(data.success) {
  var items = cachedData.items.slice()

  if(page !== 0) {
    //拼接读取出来的数据到缓存对象里
    items = items.concat(data.data)
    cachedData.nextPage += 1
  } else {
    items = data.data.concat(items)
  }

  cachedData.items = items
  cachedData.total = data.totalCount

  setTimeout(function(){
    if(page!==0) {
      that.setState({
        //将拼接出来的数据重新加载进作品列表中
        dataSource: that.state.dataSource.cloneWithRows(cachedData.items),
        isLoading: false
      })
    } else {
      that.setState({
        //将拼接出来的数据重新加载进作品列表中
        dataSource: that.state.dataSource.cloneWithRows(cachedData.items),
        isRefreshing: false
      })
    }
  },1000)
}


0
2
宅耶耶
最后解决了没,我的也是这样,过一段时间自动好了,然后现在又不行了
2017-10-19
共2条回复

贯穿全栈React Native开发App

全面掌握React Native技术,不止步前端开发,让你移动领域大放光彩

946 学习 · 385 问题

查看课程