不变违规:对象作为 React 子对象无效 [英] Invariant Violation: Objects are not valid as a React child
问题描述
在我的组件的渲染函数中,我有:
render() {const items = ['EN', 'IT', 'FR', 'GR', 'RU'].map((item) => {return (<li onClick={this.onItemClick.bind(this, item)} key={item}>{item}</li>);});返回 (<div>...<ul>{项目}...
);}
一切正常,但是当单击 元素时,我收到以下错误:
未捕获的错误:不变违规:对象作为 React 无效子(找到:带有键 {dispatchConfig、dispatchMarker、nativeEvent,目标,currentTarget,类型,eventPhase,气泡,可取消,时间戳,defaultPrevented,isTrusted,查看,详细信息,screenX, screenY, clientX, clientY, ctrlKey, shiftKey, altKey,metaKey,getModifierState,按钮,按钮,相关目标,pageX,pageY, isDefaultPrevented, isPropagationStopped, _dispatchListeners,_dispatchIDs}).如果您打算渲染一组子项,请改用数组或使用 createFragment(object) from 包装对象React 插件.检查Welcome
的render方法.
如果我将 this.onItemClick.bind(this, item)
改为 (e) =>地图函数内部的 onItemClick(e, item)
一切正常.
如果有人能解释我做错了什么并解释为什么我会收到这个错误,那就太好了
更新1:
onItemClick 函数如下,去掉 this.setState 导致错误消失.
onItemClick(e, item) {this.setState({lang:项目,});}
但是我不能删除这一行,因为我需要更新这个组件的状态
我遇到了这个错误,结果是我无意中在我的 JSX 代码中包含了一个我希望是字符串值的对象:
返回(<BreadcrumbItem href={routeString}>{面包屑元素}</面包屑项目>)
breadcrumbElement
曾经是一个字符串,但由于重构已经变成了一个对象.不幸的是,React 的错误消息并没有很好地将我指向存在问题的那一行.我不得不一直跟踪我的堆栈跟踪,直到我识别出传递给组件的道具",然后我找到了有问题的代码.
您需要引用作为字符串值的对象的属性,或者将对象转换为所需的字符串表示形式.如果您确实想查看对象的内容,则一种选择可能是 JSON.stringify
.
In my component's render function I have:
render() {
const items = ['EN', 'IT', 'FR', 'GR', 'RU'].map((item) => {
return (<li onClick={this.onItemClick.bind(this, item)} key={item}>{item}</li>);
});
return (
<div>
...
<ul>
{items}
</ul>
...
</div>
);
}
everything renders fine, however when clicking the <li>
element I receive the following error:
Uncaught Error: Invariant Violation: Objects are not valid as a React child (found: object with keys {dispatchConfig, dispatchMarker, nativeEvent, target, currentTarget, type, eventPhase, bubbles, cancelable, timeStamp, defaultPrevented, isTrusted, view, detail, screenX, screenY, clientX, clientY, ctrlKey, shiftKey, altKey, metaKey, getModifierState, button, buttons, relatedTarget, pageX, pageY, isDefaultPrevented, isPropagationStopped, _dispatchListeners, _dispatchIDs}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of
Welcome
.
If I change to this.onItemClick.bind(this, item)
to (e) => onItemClick(e, item)
inside the map function everything works as expected.
If someone could explain what I am doing wrong and explain why do I get this error, would be great
UPDATE 1:
onItemClick function is as follows and removing this.setState results in error disappearing.
onItemClick(e, item) {
this.setState({
lang: item,
});
}
But I cannot remove this line as I need to update state of this component
I was having this error and it turned out to be that I was unintentionally including an Object in my JSX code that I had expected to be a string value:
return (
<BreadcrumbItem href={routeString}>
{breadcrumbElement}
</BreadcrumbItem>
)
breadcrumbElement
used to be a string but due to a refactor had become an Object. Unfortunately, React's error message didn't do a good job in pointing me to the line where the problem existed. I had to follow my stack trace all the way back up until I recognized the "props" being passed into a component and then I found the offending code.
You'll need to either reference a property of the object that is a string value or convert the Object to a string representation that is desirable. One option might be JSON.stringify
if you actually want to see the contents of the Object.
这篇关于不变违规:对象作为 React 子对象无效的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!