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

Question

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

Answer 1

Scott 2016-10-12 12:54:43

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

• 提问者 石头作坊 #1

  谢谢老师解答，不过，您讲的这种解决方案就是您代码里写的啊，我也都照着写的。这段代码在没有抽象Item组件的时候，确实可以刷新到最前面的数据，但是抽象后就跑后面了。不明白问题在哪里

• 提问者 石头作坊 #2

  另外为什么每次刷新都是10条数据，没有设置每页加载的数据项啊

• Scott 回复 提问者 石头作坊 #3

  从服务器端可以设置一下加载的

点开查看后面1条评论

Answer 2

LarryHuang 2017-12-31 23:58:25

还有一个原因，我用的是 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
  })
}

Answer 3

LarryHuang 2017-12-31 16:26:39

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

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

Answer 4

LarryHuang 2017-12-31 16:00:47

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

• LarryHuang #1

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

Answer 5

提问者 石头作坊 2016-10-12 13:19:55

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)
}

• Scott #1

  莫非这个代码有 bug？我本地测试是好的，你先往后面看课程，跟完课程再回头看这个 state 数据次序的问题，看看我课程后面有没有再提到这里的代码改动

• 宅耶耶 #2

  最后解决了没，我的也是这样，过一段时间自动好了，然后现在又不行了