重构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 参数。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

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。

1 2 3 4 5 6 7 8 9

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

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

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

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