javascript - push empty array into react's state - Stack Overflow

admin管理员组

文章数量:1403500

my input number is dynamic, it depends on the API how many data it has. So firstly I map it to the view. But there is also a feature where user can add new item. I trying to push a new empty array, but nothing happens. Am I doing it wrong?

class HelloWorldComponent extends React.Component {

  constructor(){
    super()
    this.addNewRow = this.addNewRow.bind(this);
    this.state = {
      "rules":[
        "age must be above 10",
        "must wear shoe"
      ]
    }
  }

  addNewRow(e){
    const updated = this.state.rules.push("");
    this.setState({rules:updated});
  }


  render() {
    return (
      <div>
        {this.state.rules.map(obj => 
           <input type="text" defaultValue={obj} />
         )}
         <button>Add New Rules</button>
         <br /><br />
         <pre>{JSON.stringify(this.state.rules,null,2)}</pre>
       </div>
    );
  }
}

http://jsbin./zehoceloka/1/edit

my input number is dynamic, it depends on the API how many data it has. So firstly I map it to the view. But there is also a feature where user can add new item. I trying to push a new empty array, but nothing happens. Am I doing it wrong?

class HelloWorldComponent extends React.Component {

  constructor(){
    super()
    this.addNewRow = this.addNewRow.bind(this);
    this.state = {
      "rules":[
        "age must be above 10",
        "must wear shoe"
      ]
    }
  }

  addNewRow(e){
    const updated = this.state.rules.push("");
    this.setState({rules:updated});
  }


  render() {
    return (
      <div>
        {this.state.rules.map(obj => 
           <input type="text" defaultValue={obj} />
         )}
         <button>Add New Rules</button>
         <br /><br />
         <pre>{JSON.stringify(this.state.rules,null,2)}</pre>
       </div>
    );
  }
}

• javascript
• reactjs

Share Improve this question Follow asked Mar 8, 2017 at 8:20 MellisaMellisa 60533 gold badges1212 silver badges2222 bronze badges 0

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

You forgot to define the click event on button, use this:

<button onClick={this.addNewRow}>Add New Rules</button>

Few issues in this line:

const updated = this.state.rules.push("");

1.Never mutate the state variable directly by this.state.a.push() or this.state.a = '', always use setState to update the value.

2.a.push() will not return the updated array, it will return the value pushed into array.

From Doc:

Never mutate this.state directly, as calling setState() afterwards may replace the mutation you made. Treat this.state as if it were immutable.

Check this working code:

class HelloWorldComponent extends React.Component {
  
  constructor(){
    super()
    this.addNewRow = this.addNewRow.bind(this);
    this.state = {
      rules:[
        "age must be above 10",
        "must wear shoe"
      ]
    }
  }
  
  addNewRow(e){
    let updated = this.state.rules.slice();
    updated.push("");
    this.setState({rules:updated});
  }
    
  
  render() {
    return (
      <div>
        {this.state.rules.map(obj => 
           <input type="text" defaultValue={obj} />
         )}
         <button onClick={this.addNewRow}>Add New Rules</button>
         <br /><br />
         <pre>{JSON.stringify(this.state.rules,null,2)}</pre>
       </div>
    );
  }
}

ReactDOM.render(
  <HelloWorldComponent />,
  document.getElementById('react_example')
);

<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='react_example'/>

The objects in the state cannot be modify, you need to extract them, modify and then add again to the state:

addNewRow(e){
  let rules=this.state.rules.slice();
  rules.push('');
  this.setState({rules:rules});
}

Please try like this:

var arr = this.state.rules.slice();
arr.push("");
this.setState({ rules: arr });

本文标签： javascriptpush empty array into react39s stateStack Overflow