在按钮React Native的onPress()上渲染新行

时间:2019-12-05 08:49:02

标签: reactjs react-native react-native-android expo jsx

我想添加功能,例如:“添加新记录”。我希望每当用户单击“添加新”按钮时,都应在下面生成新行。之后,我还需要每一行的数据。我的附加代码无法正常工作,我还附加了错误。请为我提供解决方案或其他技巧。谢谢。

错误

  

未定义不是对象(评估“ this.state.row.push”)

    constructor(){
       super()
       this.state = {
          rows: []
       }
    }
    index = 0;
    _addRow(){
      this.state.rows.push(this.index++)
      this.setState({ rows: this.state.rows })
    }
    render(){
       let rows = this.state.rows.map((r, i) => {
        return <View key={ i } style={[styles.row, CheckIndex(i)]}>
                  <Text >Row { r }, Index { i }</Text>
               </View>
       })
        return (
          <View style={styles.container}>
            <TouchableHighlight onPress={ this._addRow } style={styles.button}>
                <Text>Add new row</Text>
                    </TouchableHighlight>
            { rows }
          </View>
        );
    }

2 个答案:

答案 0 :(得分:0)

请使用

_addRow(){
  this.setState(prevState => ({ rows: [...prevState.rows, prevState.rows.length] }));
}

代替

 _addRow(){
      this.state.rows.push(this.index++)
      this.setState({ rows: this.state.rows })
    }

答案 1 :(得分:0)

您可以使用下面给出的代码

constructor(props){
    super(props)
    this.state = {
       rows: [],
       index:0
    }
}

_addRow = ()=>{
    this.state.rows.push(this.state.index+1)
    this.setState({ rows: this.state.rows, index :  this.state.index+1});
}