React- FLUX - 将对象作为参数传递 - 未定义

Question

我有一个简单的 react 应用程序，我从 web api 获取联系人列表，我想显示它们。每个联系人都有姓名、姓氏、电话等 我的应用程序类获取联系人然后呈现为 ​​

render(){
var contact= this.state.contacts[0];
 return( <div><Contact label='First Contact' person={contact}/></div>
)
}

然后在我的联系人类中

render(){
return(
<div> {this.props.label} : {this.props.person.Name}</div>)
}

当我在 chrome 上调试时，我看到那个人作为道具传递，对象具有所有参数，但是当我运行代码时，在 {this.props.person.Name} 上出现错误

Cannot read property Name of undefined

如果我删除它，{this.props.label} 会毫无问题地显示。所以我可以将文本作为道具传递，但不能作为对象传递。 有什么想法吗？

• 编辑：我也可以将 Name 属性传递为 联系人姓名= {contact.Name}/> 这有效，但不能将联系人作为对象传递，然后在
的渲染中读取属性

Answer 1

我的猜测是（因为您使用的是flux）在加载页面（初始加载）时，您所在州的联系人代表一个空数组。

试试

var contact= this.state.contacts[0] || {};

对于一些好的提示 => 不要使用 vars，使用 const :-)

让您的组件监听您的通量存储：

确保您的通量存储拥有一个 addChangeListener 和 removeChangeListener 函数，您可以在组件中调用它们，以便您的组件自动更新

componentDidMount(){
  myStore.addChangeListener(this._onChange);
}

componentWillUnmount(){
  myStore.removeChangeListener(this._onChange);
}

_onChange = () => {
  this.setState({contacts: myStore.getContacts()});
}