Question

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

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

然后在我的Contact类

中

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

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

Cannot read property Name of undefined

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

编辑：我也可以传递Name属性联系人姓名= {contact.Name} /＆gt; 这可以工作，但不能将联系人作为对象传递，然后在

Answer 1

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

尝试

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

并提供一些好的提示=＆gt;不要使用变量，使用const： - ）

让你的组件听你的助焊剂店：

确保您的flux store包含一个addChangeListener和removeChangeListener函数，您可以在组件中调用该函数，以便您的组件自动更新

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

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

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

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

1 个答案: