Question

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

为了加快速度，这是我目前的反应路由器设置

我已经在应用组件的布局中完成了{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＆amp; Recipe个组件:(见下文）。

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

Cookbook Component，工作正常......：

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

配方组件使用相同的东西......

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

Answer 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

未捕获错误：对象无效作为React子级

1 个答案: