在反应中显示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