反応でJSONを表示

Question

私は反応の階層を親としており、コード内にjsonオブジェクトとして値を渡しています。ユーザーからの値を受け取る2つの入力ボックスと、値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

あなたはlist.push({text:saveText})とリストアップしようとしているので、renderList[i].desc, renderList[i].expenseはundefinedです。 renderList[i].text.desc, renderList[i].text.expense

に変更したり、ここlist.push(saveText)にlist.pushを変更するか：

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

Working codepen