Question

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

图片看得更清楚：

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

你能帮助我吗？

Answer 1

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

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

React：如何传递子组件内的对象？

1 个答案: