Javascript 在react中显示JSON

我在react中有父到孙的层次结构，我在代码中以json对象的形式传递值。我有两个输入框，从用户处获取值，还有一个按钮，用于存储和显示单击时的值

我的代码的react代码是：

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

类Todo扩展React.Component{
建造师（道具）{
超级（道具）；
这个州={
输入：[]，
描述：''，
费用：''，
名单：[]
}
this.save=this.save.bind（this）；
this.changeDesc=this.changeDesc.bind（this）；
this.changepance=this.changepance.bind（this）；
}
changeDesc（e）{
这是我的国家({
描述：e.target.value
})
}
变更费用（e）{
这是我的国家({
费用：即目标价值
})
}
保存（保存文本）{
var list=this.state.list；
list.push({
text:saveText，
})
这是我的国家({
列表：列表，
描述：''，
费用：''
})
//控制台日志（输入）；
}
render（）{
返回(
)
}
}
类Save.Component{
建造师（道具）{
超级（道具）；
这个州={
输入：this.props.text
}
this.save=this.save.bind（this）；
}
保存（）{
变量输入=this.state.input；
var desc=document.getElementById（“desc”）.value；
var费用=document.getElementById（“费用”）.value；
push（{“desc”：desc，“expense”：expense}）；
saveText（{“desc”：desc，“expense”：expense}）；
//console.log（this.props.saveText）；
这是我的国家({
输入：[]
})
}
render（）{
返回(
)
}
}
类显示扩展了React.Component{
建造师（道具）{
超级（道具）；
这个州={
待办事项：[]
}
}
组件将接收道具（下一步）{
这是我的国家({
待办事项：nextrops.list
})
}
render（）{
var renderList=this.state.todos；
var列表元素=[]；
var len=Object.keys（renderList.length）
对于todos组件中的（var i=0；i，您要将其列为
list.push（{text:saveText}）
，因此
renderList[i].desc，renderList[i]。费用
未定义
。
将其更改为
renderList[i]。text.desc，renderList[i]。text.expense

或者将
列表更改为
list.push（保存文本）
，如下所示：

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

但是当我在做的时候，list.push（{text:saveText}），那么我想我也在做同样的事情，这有什么区别。你能解释一下吗好的，那么，在saveText中你得到了一个对象，你在用'list.push（{text:saveText}）做什么`是将对象分配给另一个对象键列表。但是当您执行
list.push（saveText）
操作时，您基本上是在将对象推入数组，我希望我能够解释它