首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >不变冲突:对象作为React子级无效

不变冲突:对象作为React子级无效
EN

Stack Overflow用户
提问于 2015-10-14 13:43:57
回答 46查看 725.6K关注 0票数 459

在我的组件的呈现函数中,我有:

代码语言:javascript
复制
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>
    );
  }

一切都呈现得很好,但是当单击<li>元素时,我收到以下错误:

未捕获错误:不变冲突:对象作为React子对象无效(已找到:具有键的对象{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,#EN19#,#EN20#,#EN21#,#EN22#,#EN23#,#EN24#})。如果要渲染子对象的集合,请使用数组,或者使用React附加组件中的createFragment( object )包装对象。检查Welcome的render方法。

如果我在map函数中将this.onItemClick.bind(this, item)改为(e) => onItemClick(e, item),一切都会正常工作。

如果有人能解释我做错了什么,并解释为什么我会得到这个错误,那就太好了

更新1:

onItemClick函数如下所示,删除this.setState会导致错误消失。

代码语言:javascript
复制
onItemClick(e, item) {
    this.setState({
      lang: item,
    });
}

但我不能删除此行,因为我需要更新此组件的状态

EN

回答 46

Stack Overflow用户

发布于 2015-11-07 08:27:43

我遇到了这个错误,结果是我无意中在JSX代码中包含了一个我认为是字符串值的对象:

代码语言:javascript
复制
return (
    <BreadcrumbItem href={routeString}>
        {breadcrumbElement}
    </BreadcrumbItem>
)

breadcrumbElement曾经是一个字符串,但由于重构而变成了一个对象。不幸的是,React的错误消息并没有很好地指出问题所在。我不得不一直跟踪我的堆栈跟踪,直到我识别出传递给组件的“道具”,然后我找到了有问题的代码。

您需要引用作为字符串值的对象的属性,或者将对象转换为所需的字符串表示形式。如果您实际上想要查看对象的内容,一个选项可能是JSON.stringify

票数 501
EN

Stack Overflow用户

发布于 2016-04-16 04:19:20

因此,我在尝试显示createdAt属性时遇到此错误,该属性是一个日期对象。如果您像这样在末尾连接.toString(),它将执行转换并消除错误。只是把这个作为一个可能的答案,以防其他人遇到同样的问题:

代码语言:javascript
复制
{this.props.task.createdAt.toString()}
票数 125
EN

Stack Overflow用户

发布于 2016-06-12 17:07:42

我只是得到了相同的错误,但由于不同的错误:我使用了双花括号,如:

代码语言:javascript
复制
{{count}}

要插入count的值而不是正确的值:

代码语言:javascript
复制
{count}

编译器可能会将其转换为{{count: count}},即试图插入一个对象作为React子级。

票数 54
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/33117449

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档