反应本机列表视图未正确加载数据

Question

我有一个包含字符串列表的列表视图。最初，它从中获取行的数组应该是空的，但为了测试它，我在其中提供了数据。但是它没有显示。它仅在调用 lapPress 时显示，该调用旨在使用新字符串向表中添加一行。只有在我再次按下按钮后才会添加新字符串。此循环和最新数据仅在再次调用 lapPress 时添加。

回顾一下：

• 数组圈数的初始元素在调用 lapPress 之前不会显示
• 新行在被调用两次 lapPressed 之前不会显示

我已经删除了不相关的代码，这是我的代码：

  constructor(props) {
    super(props);
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    //dataSource: this.state.dataSource.cloneWithRows(this.state.laps)
    this.state = {
      laps: [2,3],
      dataSource: ds.cloneWithRows(this.laps),
    }
  }

  render() {
    return <View>
        {this.showList()}
    </View>
  }

  showList() {
    return <ListView
        dataSource={this.state.dataSource}
        renderRow={this.renderRow.bind(this)}
      />
  }
renderRow(rowData, sectionID, rowID) {
    return (
      <View style={styles.row}>
      <Text style={styles.rowText} numberOfLines={1}>{rowData}</Text>
      </View>
    );
  }

lapPressed = () => {
    var lap = formatTime(this.state.timeElapsed);
    this.setState({
      startTime: new Date(),
      laps: this.state.laps.concat([lap]),
      dataSource: this.state.dataSource.cloneWithRows(this.state.laps)
    });
    return
  }

Answer 1

这是你的问题：

this.state = {
  laps: [2,3],
  dataSource: ds.cloneWithRows(this.laps),
}

this.laps未定义。它应该是this.state.laps，但这里也没有分配。我认为这就是您需要的：

var laps = [2, 3];
this.state = {
  laps: laps,
  dataSource: ds.cloneWithRows(laps),
}

Answer 2

这是因为我在lapPressed中提供了旧状态，这是正确的版本。

lapPressed = () => {
    var lap = formatTime(this.state.timeElapsed);
    var temp = this.state.laps.concat([lap])
    this.setState({
      startTime: new Date(),
      laps: temp,
      dataSource: this.state.dataSource.cloneWithRows(temp)
    });
    return
}