React:如何传递子组件内的对象?

时间:2017-08-21 01:09:34

标签: reactjs components

我对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)包装对象。

图片看得更清楚:

enter image description here

我已经阅读了很多其他问题,但没有一个可以帮助我。

你能帮助我吗?

1 个答案:

答案 0 :(得分:2)

如评论中所述,问题是由于属性error.response.data不是&#34;有效的React孩子&#34;。 此属性将传递给NotificationSystem组件(https://github.com/igorprado/react-notification-system),该组件可能会尝试将其呈现为字符串。

解决方案是传递一个真实的字符串而不是error.response.data