反应状态 - 我做错了什么？

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功能。

希望这有助于:)