在我组件的渲染函数中,我有:

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>元素时,我收到以下错误:

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.

如果我改成this。onitemclick。绑定(this, item) to (e) => onItemClick(e, item)内的映射函数,一切都按预期工作。

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

更新1: onItemClick函数如下所示。setState会导致错误消失。

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

但是我不能删除这一行,因为我需要更新这个组件的状态


当前回答

我的案例在使用reduce时很常见,但这里没有分享,所以我发布了它。

通常,如果你的数组是这样的:

[{值:1},{值:2}]

你想要呈现这个数组中值的和。JSX代码如下所示

<div>{array.reduce((acc, curr) => acc.value + curr.value)}</div>

当数组只有一个项时,会出现这个问题,例如:[{value: 1}]。 (通常,当你的数组是来自服务器的响应时,这种情况发生,所以你不能保证数组中的项目数量)

当数组只有一个元素时,reduce函数返回元素本身,在这种情况下,它是{value: 1}(一个对象),它会导致不变性违反:对象是无效的React子错误。

其他回答

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

{{count}}

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

{count}

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

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

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

如果使用无状态组件,请遵循以下格式:

const Header = ({pageTitle}) => (
  <h1>{pageTitle}</h1>
);
export {Header};

这似乎对我很管用

我花了半天时间来解决这个问题

我想根据用户是否登录显示一个数组

这就是我的代码 返回({userLogged ?userLoggedCart: cartItems} .map((item)=>{返回//无关代码})) 但这是错误的,如果你的代码是这样的,你就得把它改成

if (userLogged){return (userLoggedCart.map((item)=>{return //您的代码})}否则{cartItems.map((item)=>{return //您的代码})}

我有这个错误,原来是我无意中包括一个对象在我的JSX代码,我本以为是一个字符串值:

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

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

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