在React JS中传递和显示对象数组

Question

我有两个输入框，它们将从用户那里获取输入，单击按钮会将输入保存在数组中并显示在屏幕上。

我为之编写的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,expense);
    this.props.saveText(input);
    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=[];
    for(var i=0;i<renderList.length;i++){
    listElements.push(renderList[i]);
    console.log(listElements);
    }
    return(
      <div>{listElements}</div>
    )
  }
}

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

但是这段代码没有在屏幕上显示任何内容，对于某些给定的输入，我遇到了这样的错误。

相同的Codepen链接是： 链接

反应代码有什么问题？

Answer 1

您的列表包含一个对象文本数组，该对象文本本身就是一个字符串数组，

你也可以简单地映射它而不是for循环

render(){


    return(
      <div>{this.state.todos.map((item) => (<div>{item.text[0] + ' ' + item.text[1]}</div>))}</div>
    )
  }

CODEPEN