我对React真的很新,我遇到了问题。我有一个通知系统,我在一个组件内包装。对于这个组件,我需要发送包含消息的对象和消息的级别。
我在应用程序的顶层有这个组件。所以我希望我的另一个子组件可以访问此通知组件。
例如,如果我有登录组件并且登录失败,那么我想调用此通知:
handleSubmit(data){
var self = this;
//console.log(data);
AuthService.signin(data)
.then(function(response){
console.log(response);
})
.catch(function(error){
self.props.onShowNotification({
message: error.response.data,
level: 'error'
})
console.log(error.response.data);
})
}
在我的父组件上:
constructor(){
super()
this.state = {
notificationObject: {}
}
this.handleNotification = this.handleNotification.bind(this);
}
handleNotification(notificationObject){
this.setState({
notificationObject: notificationObject
})
}
render() {
return (
<div className="full-height">
{this.state.notificationObject.message && <Notifications notificationObject={this.state.notificationObject}></Notifications>}
<Login onShowNotification={this.handleNotification}></Login>
</div>
);
}
}
我的通知组件:
constructor(props){
super(props)
}
componentDidMount() {
this._notificationSystem = this.refs.notificationSystem;
console.log(this.props.notificationObject)
this._notificationSystem.addNotification({
message: this.props.notificationObject.message,
level: this.props.notificationObject.level
});
}
render(){
return(
<NotificationSystem ref="notificationSystem" />
);
}
问题是我收到了这个错误:
未捕获(在promise中)错误:对象作为React子对象无效(找到:具有键{error}的对象)。如果您要渲染子集合,请使用数组,或者使用React附加组件中的createFragment(object)包装对象。
图片看得更清楚:
我已经阅读了很多其他问题,但没有一个可以帮助我。
你能帮助我吗?
答案 0 :(得分:2)
如评论中所述,问题是由于属性error.response.data
不是&#34;有效的React孩子&#34;。
此属性将传递给NotificationSystem组件(https://github.com/igorprado/react-notification-system),该组件可能会尝试将其呈现为字符串。
解决方案是传递一个真实的字符串而不是error.response.data
。