[英]Uncaught Error: Objects are not valid as a React child
This is quite confusing for me but I'm clearly missing something. 这对我来说很混乱,但是我显然缺少了一些东西。
To get up to speed, here is my current react-router setup 为了加快速度,这是我当前的反应路由器设置
I've already done {React.cloneElement(this.props.children, this.props)}
within the layout of the app component, and other routes are working fine passing the props down via {...this.props}
. 我已经在应用程序组件的布局内完成了
{React.cloneElement(this.props.children, this.props)}
,其他路线也很好地通过{...this.props}
传递了道具。 Just not on the children components of the IndexRoute component. 只是不在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'))
And the error occurs within the Week
component which is below: 并且错误发生在下面的
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 throws an error when I do this (but only on this component): Uncaught Error: Objects are not valid as a React child (found: object with keys...
当我这样做时(但仅在此组件上),React会引发错误:
Uncaught Error: Objects are not valid as a React child (found: object with keys...
As I've done it Cookbook
& Recipe
components: (See below). 完成此操作后,
Cookbook
和Recipe
组件:(请参见下文)。
I'm wondering if it's something to do with the Week
Component being the IndexRoute? 我想知道是否与
Week
组件是IndexRoute有关? But other than that I'm completely lost. 但是除此之外,我完全迷失了。
Cookbook Component which works fine...: 可以正常工作的菜谱组件...:
render () {
return (
<div className='container'>
<h1>Cookbook Recipes</h1>
<Recipes {...this.props} />
</div>
)
}
Recipe component uses the same thing... 配方组件使用相同的东西...
<RecipeWeekDay name='Monday' mealName={meal.name} mealSlug={meal.slug} {...this.props} />
I realised that within my Day
component, I was trying to render what I thought was a string but was ultimately a Javascript object which was throwing the error. 我意识到在
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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.