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

Question

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

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

然后在我的联系人类(class)中

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

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

Cannot read property Name of undefined

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

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

Answer 1

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

尝试

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

还有一些好的技巧 => 不要使用 var，使用 const :-)

让你的组件监听你的助焊剂存储:

确保您的助焊剂存储区包含可以在组件中调用的 addChangeListener 和 removeChangeListener 函数，以便您的组件自动更新

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

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

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