我只是让自己经历了一个非常愚蠢的错误版本，我不妨在这里为后代分享一下。

我有一些JSX是这样的:

...
{
  ...
  <Foo />
  ...
}
...

我需要注释掉它来调试一些东西。我在IDE中使用键盘快捷键，结果是这样的:

...
{
  ...
  { /* <Foo /> */ }
  ...
}
...

当然，这是无效的——对象作为react子对象是无效的!

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

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

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

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

我写:

{response.isDisplayOptions &&
{element}
}

把它放在一个div固定:

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

只需删除return语句中的花括号。

之前:

render() {
    var rows = this.props.products.map(product => <tr key={product.id}><td>{product.name}</td><td>{product.price}</td></tr>);
    return {rows}; // unnecessary
}

后:

render() {
    var rows = this.props.products.map(product => <tr key={product.id}><td>{product.name}</td><td>{product.price}</td></tr>);
    return rows; // add this
}

通常这是因为你没有正确地解构。以下面的代码为例:

const Button = text => <button>{text}</button>

const SomeForm = () => (
  <Button text="Save" />
)

我们用= text =>参数声明它。但实际上，React希望这是一个包揽一切的props对象。

所以我们真的应该这样做:

const Button = props => <button>{props.text}</button>

const SomeForm = () => (
  <Button text="Save" />
)

注意到区别了吗?这里的props参数可以被命名为任何东西(props只是与命名法相匹配的惯例)，React只是期望一个具有键和val的对象。

使用对象解构，你可以这样做，也经常会看到这样的东西:

const Button = ({ text }) => <button>{text}</button>

const SomeForm = () => (
  <Button text="Save" />
)

.．.这工作。

有可能，任何偶然发现这一点的人只是不小心声明了他们组件的props参数而没有解构。

我也有同样的问题， 我更新了redux状态，新的数据参数不匹配旧的参数，所以当我想通过这个错误访问一些参数时，

也许这种经历能帮助到某些人