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

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

其他回答

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

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

这似乎对我很管用

我的问题非常特别:在我的.env文件中,我在有我的api url的行中放了一个注释:

API_URL=https://6ec1259f.ngrok.io #comment

当我尝试登录/注册时,我会得到不变违反错误,因为api url是错误的。

我的问题是忘记了道具周围的花括号被发送到一个表示组件:

之前:

const TypeAheadInput = (name, options, onChange, value, error) => {

const TypeAheadInput = ({name, options, onChange, value, error}) => {

对于任何在Android上使用Firebase的人来说,这只会破坏Android。我的iOS模拟忽略了它。

如上Apoorv Bankey所述。

对于Android来说,任何Firebase V5.0.3以上的东西都是失败的。解决办法:

npm i --save firebase@5.0.3

这里已经确认过很多次了 https://github.com/firebase/firebase-js-sdk/issues/871

在使用Firebase的情况下,如果把它放在import语句的末尾不能工作,那么你可以尝试把它放在一个生命周期方法中,也就是说,你可以把它放在componentWillMount()中。

componentWillMount() {
    const firebase = require('firebase');
    firebase.initializeApp({
        //Credentials
    });
}