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

Question

I have a list view which contains a list of strings. Initially the array from which it gets its rows from should be empty, but just to test it I have provided data in it. However it does not show up. It only shows when call lapPressed which is intended to add a row to the table with a new string. And the new string only gets added once I press the button again. This loops and the newest data only gets added upon calling the lapPressed again.

To recap:

• The initial elements of the array laps don't show until lapPressed is called
• New rows don't show until lapPressed has been called twice

I have removed the irrelevant code, Here is my code:

  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 is your problem:

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

this.laps is not defined. It should be this.state.laps , but that's not assigned here either. I think this is what you need:

var laps = [2, 3];

this.state = {
  laps: laps,
  dataSource: ds.cloneWithRows(laps),
}

Answer 2

Well it's because I was providing the old state in the lapPressed, this is the correct version.

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

}