Anzeige JSON in reagieren

Question

Ich habe Eltern zu Enkel Hierarchie in reagieren und ich übergeben Werte als Json Objekte in meinem Code.Ich habe zwei Eingabefelder, die Werte von Benutzer und eine Schaltfläche, die speichert und zeigt die Werte onclick.

Der reagieren Code für meinen Code:

class Todo extends React.Component{ 
    constructor(props){ 
    super(props); 
    this.state={ 
     input:[], 
     desc:'', 
     expense:'', 
     list:[] 
    } 
    this.save=this.save.bind(this); 
    this.changeDesc=this.changeDesc.bind(this); 
    this.changeExpense=this.changeExpense.bind(this); 
    } 
    changeDesc(e){ 
    this.setState({ 
     desc:e.target.value 
    }) 
    } 

    changeExpense(e){ 
    this.setState({ 
     expense:e.target.value 
    }) 
    } 
    save(saveText){ 
    var list=this.state.list; 
    list.push({ 
     text:saveText,  
    }) 
    this.setState({ 
     list:list, 
     desc:'', 
     expense:'' 
    }) 
    //console.log(input); 
    } 
    render(){ 
     return(
      <div> 
      <Save saveText={this.save} text={this.state.input}/> 
      <Display list={this.state.list}/> 
      </div> 
     ) 
    } 
} 
class Save extends React.Component{ 
    constructor(props){ 
    super(props); 
    this.state={ 
     input:this.props.text 
    } 
    this.save=this.save.bind(this); 
    } 
    save(){ 
    var input=this.state.input; 
    var desc=document.getElementById("desc").value; 
    var expense=document.getElementById("expense").value; 
    input.push({"desc" : desc, "expense": expense}); 
    this.props.saveText({"desc" : desc, "expense": expense}); 
    //console.log(this.props.saveText); 
    this.setState({ 
     input:[] 
    }) 
    } 
    render(){ 
    return(
     <div> 
     <input type='text' id="desc" onChange={this.changeDesc}/> 
     <input type="text" id="expense" onChange={this.changeExpense}/> 
     <input type="button" value="save" onClick={this.save}/> 
     </div> 
    ) 
    } 
} 

class Display extends React.Component{ 
    constructor(props){ 
    super(props); 
    this.state={ 
     todos:[] 
    } 
    } 
    componentWillReceiveProps(nextProps){ 
    this.setState({ 
     todos:nextProps.list 
    }) 
    } 
    render(){ 
    var renderList=this.state.todos; 
    var listElements=[]; 
    var len=Object.keys(renderList).length 
    for(var i=0;i<len;i++){ 
    listElements.push(
     <Post i={i} desc={renderList[i].desc} expense={renderList[i].expense}/> 
    ); 
    //console.log(listElements); 

    } 
    return (
     <div> 
     { 
     listElements 
     } 
     </div> 
    ); 
    } 
} 

class Post extends React.Component{ 
    render(){ 
    return(
     <div> 
     <span>{this.props.desc}</span> 
     <span>{this.props.expense}</span> 
     <span>Edit</span> 
     </div> 
    ) 
    } 
} 

ReactDOM.render(<Todo/>,document.getElementById('root')); 

Wenn ich diesen Code ausführen, bekomme ich die Ausgabe als Und es gibt keine Fehler in der Ausgabe. Was stimmt nicht mit der Logik des obigen Codes?

Answer 1

In Todos Komponente sind Sie pusing zu Liste als list.push({text:saveText}) und damit renderList[i].desc, renderList[i].expense sind undefined. Entweder ändern Sie ihn auf renderList[i].text.desc, renderList[i].text.expense

oder ändern die list.push zu list.push(saveText) hier:

save(saveText){ 
    var list=this.state.list; 
    list.push(saveText) 
    this.setState({ 
     list:list, 
     desc:'', 
     expense:'' 
    }) 
    //console.log(input); 
    } 

Working codepen