反應狀態 - 我做錯了什麼？

Question

我正在嘗試學習reactjs和構建名稱然後顯示名稱的小應用程序。

我有一個輸入表單，並且能夠在單擊提交到我的狀態對象後從輸入表單中獲取數據稱爲names。

但我被困在從父傳遞狀態到另一個組件，它是我的ShowNames組件的內部：

因此，在應用程序，我這樣做渲染：

render : function() { 
     return (
      <div> 
       <InputName addToState={this.addToState}/> 
       <ShowName renderName={this.renderName}/> 
      </div> 
     ) 
    } 
}); 

然後ShowName組件有以下：

var ShowName = React.createClass({ 

    render : function() { 
     return (
      <ListOfNames renderName={this.props.renderName}/> 
     ) 
    } 
}); 

所以我做了

var ListOfNames = React.createClass({ 

    render : function() { 
     return (
      <ul renderName={this.props.renderName}> 
       {Object.keys(this.state.names).map(this.renderName)} 
      </ul> 
     ) 
    } 
}); 

但問題是它說無法讀取null的屬性'名稱'。有人可以幫忙嗎？

Answer 1

您需要初始化狀態，否則狀態將爲空。

React.createClass({ 
    getInitialState: function() { 
     return { names: [] }; 
    }, 

    // all the rest here 
} 

---

編輯

看到的代碼後，我發現了幾個錯誤，更新的代碼現在的位置：http://jsbin.com/sewoxu/edit?js,output

那麼主要錯誤是，渲染功能的ShowName正在使用狀態來獲取名稱，但通過屬性傳遞的名稱：

<ShowName renderName={this.renderName} names={this.state.names}/> 

所以在這種情況下訪問名字屬性，你需要做的：

this.props.names 

而且在本例中我提出ShowName組件內部的renderName功能。

希望這有助於:)