leeres Array schiebt in

Question

Staat reagieren

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

meine Eingangsnummer dynamisch ist, hängt es von der API, wie viele Daten es hat. Also zuerst mappe ich es auf die Ansicht. Aber es gibt auch eine Funktion, wo Benutzer neue Artikel hinzufügen können. Ich versuche, ein neues leeres Array zu verschieben, aber nichts passiert. Mache ich es falsch?

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> 
    ); 
    } 
} 

Answer 1

Sie haben vergessen, das Click-Ereignis auf die Schaltfläche zu definieren, verwenden Sie diese :

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

paar Probleme in dieser Zeile:

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

1. Ändern Sie niemals die Statusvariable direkt durch this.state.a.push() oder this.state.a = '', verwenden Sie immer setState, um den Wert zu aktualisieren.

2. a.push() wird nicht die aktualisierte zurückgegeben, es wird den Wert in Array zurückgegeben.

Von Doc:

nie this.state direkt mutieren, wie der Aufruf von setState() danach kann ersetzen die Mutation Sie gemacht. Behandle diesen Zustand so, als wäre er unveränderlich.

prüfen diese Arbeitscode:

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.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id='react_example'/>

Answer 2

Die Objekte in dem Zustand nicht ändern können, können Sie sie extrahieren müssen, ändern und dann wieder in den Staat:

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

Answer 3

Bitte versuchen Sie es wie folgt aus:

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