傳遞和顯示對象中的數組js

Question

我有兩個輸入框可以從用戶處獲得輸入，點擊一個按鈕可以將輸入保存在數組中並將其顯示在屏幕上。

的反應，我的同樣是這樣寫的代碼：

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鏈接，同樣是：Link

什麼是錯的反應代碼？

Answer 1

您的列表包含iteself是字符串數組對象文本的數組，

你也可以簡單地映射了它，而不是有一個for循環

render(){ 


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

CODEPEN