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

javascript reactjs

2022-08-29 23:09:17

在我的组件的渲染函数中，我有：

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， button， relatedTarget， pageX， pageY， isDefaultPrevented， isPropagationStopped， _dispatchListeners， _dispatchIDs}）。如果你打算渲染一个子集合，请使用数组，或者使用 React 附加组件中的 createFragment（object）包装对象。检查的渲染方法。Welcome

如果我切换到地图功能内部，一切都按预期工作。this.onItemClick.bind(this, item)(e) => onItemClick(e, item)

如果有人可以解释我做错了什么，并解释为什么我得到这个错误，那就太好了

更新1：
onItemClick函数如下，删除this.setState会导致错误消失。

onItemClick(e, item) {
    this.setState({
      lang: item,
    });
}

但我无法删除此行，因为我需要更新此组件的状态

答案 1

我遇到了这个错误，结果是我无意中在我的JSX代码中包含了一个对象，我本来以为它是一个字符串值：

return (
    <BreadcrumbItem href={routeString}>
        {breadcrumbElement}
    </BreadcrumbItem>
)

breadcrumbElement曾经是一个字符串，但由于重构而变成了一个对象。不幸的是，React的错误消息在将我指向存在问题的行方面做得并不好。我不得不一直跟踪我的堆栈跟踪，直到我认识到“props”被传递到一个组件中，然后我发现了有问题的代码。

您需要引用对象的属性（该属性是字符串值），或者将 Object 转换为所需的字符串表示形式。一种选择可能是，如果您确实想要查看对象的内容。JSON.stringify

答案 2

因此，在尝试显示作为 Date 对象的属性时，我遇到了此错误。如果你像这样在末端连接，它将进行转换并消除错误。只是将此作为可能的答案发布，以防其他人遇到相同的问题：createdAt.toString()

{this.props.task.createdAt.toString()}