未捕获的错误：对象作为 React 子项无效答案

【问题标题】：Uncaught Error: Objects are not valid as a React child未捕获的错误：对象作为 React 子项无效
【发布时间】：2017-08-04 21:45:57
【问题描述】：

这让我很困惑，但我显然遗漏了一些东西。

为了跟上进度，这是我当前的 react-router 设置

我已经在应用组件的布局中完成了{React.cloneElement(this.props.children, this.props)}，并且其他路线工作正常，通过{...this.props} 向下传递道具。只是不在 IndexRoute 组件的子组件上。

render((
  <Provider store={store}>
    <Router history={history}>
      <Route path='/' component={App}>
        <IndexRoute component={Week} />
        <Route path='/cook-book' component={Cookbook} />
        <Route path='/cook-book/:recipe' name='Recipe' component={Recipe} />
      </Route>
    </Router>
  </Provider>
), document.getElementById('app'))

并且错误发生在下面的Week 组件中：

render () {
    return (
      <div className='week__weekly-container'>
        <h1>This is the weekly container</h1>
        <Day title='Monday' {...this.props} />
        <Day title='Tuesday' {...this.props} />
        <Day title='Wednesday' {...this.props} />
        <Day title='Thursday' {...this.props} />
        <Day title='Friday' {...this.props} />
        <Day title='Saturday' {...this.props} />
        <Day title='Sunday' {...this.props} />
      </div>
    )
  }

当我这样做时，React 会抛出一个错误（但只在这个组件上）：Uncaught Error: Objects are not valid as a React child (found: object with keys...

正如我所做的那样，Cookbook & Recipe 组件：（见下文）。

我想知道这是否与 Week 组件是 IndexRoute 有关？但除此之外，我完全迷失了。

Cookbook 组件可以正常工作...：

render () {
    return (
      <div className='container'>
        <h1>Cookbook Recipes</h1>
        <Recipes {...this.props} />
      </div>
    )
  }

Recipe 组件使用相同的东西...

<RecipeWeekDay name='Monday' mealName={meal.name} mealSlug={meal.slug} {...this.props} />

【问题讨论】：

this.props 中有什么内容？

标签： javascript reactjs react-redux react-jsx react-router-redux

【解决方案1】：

我意识到在我的 Day 组件中，我试图渲染我认为是字符串但最终是抛出错误的 Javascript 对象。

class Day extends React.Component {
  render () {
    console.log(this.props)
    return (
      <div className='week__single-week'>
        <h4 className='week__title text-center'>{this.props.title}</h4>
        <p>{this.props.meals}</p> //- This was an array of objects and not a string.
      </div>
    )
  }
}
export default Day

【讨论】：