React：如何在子组件中传递对象？答案

【问题标题】：React: how to pass a object inside a child component?React：如何在子组件中传递对象？
【发布时间】：2017-08-21 01:09:33
【问题描述】：

我对 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" />
    );
}

问题是我得到了这个错误：

未捕获（承诺中）错误：对象作为 React 子项无效（已找到：带有键 {error} 的对象）。如果您打算渲染一组子项，请改用数组或使用 React 附加组件中的 createFragment(object) 包装对象。

一张图片可以看得更清楚：

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

你能帮帮我吗？

【问题讨论】：

您能发布显示错误的render 函数吗？此错误意味着您正在尝试渲染一个不是基本对象（字符串、数字等）或 React 对象的对象。
嗨@PaulDS 我使用的所有渲染都在帖子上。我不会像这样直接渲染任何东西：{this.props.notficationObjet}你能帮帮我吗？
你在使用这个库：github.com/igorprado/react-notification-system 吗？如果是这样，我想这个库期望“消息”属性是一个字符串。你能检查出来自你的error.response.data 对象是AuthService 是一个字符串吗？
天啊！就是它！！！你明白了我的朋友！非常感谢！是的......是这个库，是的......我发送的数据是另一个对象！请写下答案，以便我将其选为正确的。再次，非常感谢！

标签： reactjs components

【解决方案1】：

正如 cmets 中所说，问题是由于属性 error.response.data 不是“有效的 React 孩子”这一事实。此属性被传递给 NotificationSystem 组件 (https://github.com/igorprado/react-notification-system)，它可能会尝试将其呈现为字符串。

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

【讨论】：