Question

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

回顾一下：

在调用lapPressed之前，数组圈的初始元素不会显示
直到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

}

React-Native ListView无法正确加载数据

2 个答案: