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

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子错误。

其他回答

所发生的是您试图实现的onClick函数立即被执行。 因为我们的代码不是HTML,它是javascript,所以它被解释为一个函数执行。 onClick函数接受函数作为参数,而不是函数执行。

const项=[“EN”,“它”,“FR”、“GR”,“俄罗斯”). map((项)= > { 返回(<李onClick = {(e) = > onItemClick (e,项)}关键={项}>{项}< /李>); });

这将在List Item上定义一个onClick函数,该函数将在单击它后执行,而不是在组件呈现时立即执行。

在我的例子中,我向我的子函数组件添加了一个async,并遇到了这个错误。不要使用带有子组件的async。

如果你在console.log中打印Object/ Arrays,那么也会出现这个错误。确保添加了JSON。stringify如果你想为对象/数组做console.log

类似的事情刚刚发生在我身上……

我写:

{response.isDisplayOptions &&
{element}
}

把它放在一个div固定:

{response.isDisplayOptions &&
    <div>
        {element}
    </div>
}

我的错误是这样写的:

props.allinfo.map((stuff, i)=>{
  return (<p key={i}> I am {stuff} </p>)
})

而不是:

props.allinfo.map((stuff, i)=>{
  return (<p key={i}> I am {stuff.name} </p>)
})

这意味着我试图渲染对象而不是其中的值。

编辑:这是反应不是本机。