try{
    throw new Error(<p>An error occured</p>)
}catch(e){
    return (e)
}

上面的代码产生了错误，然后我重写了它，像这样:

try{
    throw(<p>An error occured</p>)
}catch(e){
    return (e)
}

注意try块中new Error()的删除…

为了避免这个错误消息，编写代码的一个更好的方法是将一个字符串传递给throw new error()而不是JSX，并在catch块中返回JSX，就像这样:

try{
    throw new Error("An error occurred")
}catch(e){
    return (
        <p>{e.message}</p>
    )
}

对于那些提到Stringify()和toString()作为解决方案的人，我会说这对我有用，但我们必须理解问题以及为什么会发生。在我的代码中，这是一个简单的问题。我有2个按钮调用相同的函数，但其中一个按钮没有正确地将参数传递给该函数。

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

我有一些JSX是这样的:

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

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

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

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

我想在这个列表中添加另一个解决方案。

规格:

“反应”:“^ 16.2.0”, :“react-dom ^ 16.2.0”, :“react-redux ^ 5.0.6”, :“react-scripts ^ 1.0.17”, “终极版”:“^ 3.7.2章”

我也遇到了同样的错误:

未捕获错误:对象作为React子对象无效(found: object 键{XXXXX})。如果你想把一群孩子， 使用数组代替。

这是我的代码:

let payload = {
      guess: this.userInput.value
};

this.props.dispatch(checkAnswer(payload));

解决方案:

  // let payload = {
  //   guess: this.userInput.value
  // };

this.props.dispatch(checkAnswer(this.userInput.value));

出现这个问题是因为负载将项目作为对象发送。当我删除有效负载变量并将userInput值放入分派时，一切都开始正常工作。

如果您正在使用Firebase并看到此错误，则值得检查是否导入正确。从5.0.4版本开始，你必须像这样导入它:

import firebase from '@firebase/app'
import '@firebase/auth';
import '@firebase/database';
import '@firebase/storage';

是的，我知道。我在这上面也浪费了45分钟。

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

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

这似乎对我很管用