如何在按下按钮时呈现新行

Question

I want to add functionality eg: 'Add New Record'. I want whenever user clicked on 'Add New' button so new row should be generated below. after that I also want the data of every single row. My attached code is not working, I've also attached the error. Please provide me a solution or another trick for it. Thanks.

undefined is not an object (evaluating '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>
        );
    }

Answer 1

This is because React state is an immutable object. You can't use functions to mutate stuff like push() append() etc.

Instead you should create a new instance, and assign that to your state.

a great way to do this, is to use the spread operator ... and create a new array using bracket notation

here is a general example of this could be done

addRow = () =>{
const row ={//the data of the new rowobject}
this.setState({rows: [row, ...this.state.rows]})
}

here the new row object, will just be assigned to a new array, and passed into the new state

Answer 2

What @baileyhaldwin said about mutating the state, is totally right.

I would amend your _addRow function like this

Checkout the demo

class App extends Component {
  constructor() {
    super()
    this.state = {
      rows: []
    }
 }

_addRow = () => {
  let { rows } = this.state
  let index = rows.length
  rows.push(index++)
  this.setState(rows)
}

render() {
  const rows = this.state.rows.map((r, i) => {
    return (
      <View key={ i }>
        <Text >Row { r }, Index { i }</Text>
      </View>
    )
 })

   return (
     <View>
       <TouchableHighlight onPress={this._addRow}>
         <Text>Add new row</Text>
       </TouchableHighlight>
      {rows}
     </View>
   );
 }
 }


export default App;

Answer 3

You can try the below code, just make a temporary variable and assign the state value to that variable and then push the new value to that after that set the state with that new variable.

constructor(){
    super()
    this.state = {
        rows: []
    }
}
index = 0;
_addRow(){
    let temp = [...this.state.rows]
    temp.push(this.index++)
    this.state.rows.push()
    this.setState({ rows: temp })
}
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>
    );
}

I hope this helps...Thanks :)