在反應中顯示JSON

Question

我有父母孫子層次反應，我傳遞值作爲JSON對象在我的code.I有兩個輸入框，從用戶和一個按鈕，它存儲和顯示值onclick的值。

的爲我的代碼反應代碼：

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

當我執行這個代碼，我得到的輸出而且還有在輸出中沒有錯誤。上述代碼的邏輯有什麼問題。

Answer 1

在todos組件中，您正在嘗試將其列爲list.push({text:saveText})，因此renderList[i].desc, renderList[i].expense是undefined。無論是將其更改爲renderList[i].text.desc, renderList[i].text.expense

或改變list.push到list.push(saveText)這裏：

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

Working codepen