Question

我是反应原生的新人，我没什么问题，当我进入组件数据没有加载但是在第二次进入后，我得到了所有。 Mae o选择错误的生命周期来使用它？

class Followers extends Component {

  componentWillMount() {
    this.props.followersFetch();
    this.createDataSource(this.props)
  }

  componentWillReceiveProps(nextProps) {
      this.createDataSource(nextProps)
  }

  createDataSource({followersList}) {
    const ds = new ListView.DataSource({
      rowHasChanged: (r1, r2) => r1 !== r2
    })
    this.dataSource = ds.cloneWithRows(followersList)
  }

  renderRow(event) {
    return (
      <User info = {info} />
    );

  }

  render() {
    return (

      <Container>
          <Content>
              <ListView
              enableEmptySections
              dataSource={this.dataSource}
              renderRow={this.renderRow}
              />
          </Content>
      </Container>
    );
  }
}

const  mapStateToProps = state  => {
  const followersList = _.map(state.relation.followersList, (val, uid) => {
      return {...val, uid}
  });

  return {followersList}
}

export default connect(mapStateToProps, {followersFetch})(Followers);

我写错了什么？我认为使用componentWillMount有问题吗？

Answer 1

尝试将this.dataSource初始化移动到componentWillMount，类似于：

componentWillMount() {
  const ds = new ListView.DataSource({
    rowHasChanged: (r1, r2) => r1 !== r2
  })
  this.dataSource = ds.cloneWithRows(followersList)
}

第二次加载后，React-native ListView DataSource更新

1 个答案: