不变违规：对象作为React子元素无效

我的问题很特别：在我的.env文件中，我在具有我的api网址的行中添加了注释：

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

我会得到Invariant violation尝试登录/注册时的错误，因为API网址是错误的。

我的错误是因为这样编写：

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>)
})

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

编辑：这是为了反应不是本地的。

Invariant Violation: Objects are not valid as a React child使用需要renderItem道具的组件时发生了我的事，例如：

renderItem={this.renderItem}

我的错误是使我的renderItem方法async。

在我的情况下，发生错误是因为我用大括号返回了元素数组，而不仅仅是返回数组本身。

错误代码

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

正确的代码

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

就我而言，我向子功能组件添加了异步，并遇到了此错误。不要对子组件使用异步。

我遇到了同样的错误，我改变了这个

export default withAlert(Alerts)

对此

export default withAlert()(Alerts)。

在较旧的版本中，以前的代码可以，但是在较新的版本中，它将引发错误。因此，请使用后面的代码来避免出现错误。

找到：带键的对象

这意味着您传递的东西是关键值。因此，您需要修改处理程序：

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

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

您错过了花括号（{}）。

像这样的事情刚发生在我身上...

我写：

{response.isDisplayOptions &&
{element}
}

将其放置在div中修复：

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

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

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

这似乎对我有用

当我遇到以下错误时，我的问题很简单：

objects are not valid as a react child (found object with keys {...}

只是我在传递带有错误中指定键的对象时，尝试使用{object}直接在组件中呈现该对象，并期望它是一个字符串

object: {
    key1: "key1",
    key2: "key2"
}

在React Component上渲染时，我使用了以下内容

render() {
    return this.props.object;
}

但这应该是

render() {
    return this.props.object.key1;
}

如果万一您使用Firebase，则项目中的任何文件。然后只需将导入的firebase语句放在最后即可！！

我知道这听起来很疯狂，但请尝试！

我想在此列表中添加其他解决方案。

眼镜：

• “ react”：“ ^ 16.2.0”，
• “ react-dom”：“ ^ 16.2.0”，
• “ react-redux”：“ ^ 5.0.6”，
• “ react-scripts”：“ ^ 1.0.17”，
• “ redux”：“ ^ 3.7.2”

我遇到了同样的错误：

未捕获的错误：对象作为React子对象无效（找到：键为{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值放入分派中时，一切按预期开始工作。

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

我有一些像这样的JSX：

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

我需要对此进行注释以调试某些内容。我在IDE中使用了键盘快捷键，结果是：

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

当然，这是无效的-对象不是有效的反应子对象！

我遇到了同样的问题，因为我没有将props花括号放进去。

export default function Hero(children, hero ) {
    return (
        <header className={hero}>
            {children}
        </header>
    );
}

因此，如果您的代码与以上代码相似，则会收到此错误。要解决此问题，只需将花括号放在props。

export default function Hero({ children, hero }) {
    return (
        <header className={hero}>
            {children}
        </header>
    );
}

在我的情况下，我遇到了同样的问题，我更新了redux状态，而新的数据参数与旧参数不匹配，所以当我想通过此错误访问某些参数时，

也许这种经验可以帮助某人

在我的情况下，我忘记了返回render函数的html元素，而我却返回了一个对象。我所做的只是将{items}用html元素包装-如下所示的简单div

<ul>{items}</ul>

如果出于某种原因您导入了firebase。然后尝试运行npm i --save firebase@5.0.3。这是因为firebase break反应为原生，因此运行此程序将对其进行修复。

我也收到了“对象作为React子对象无效”错误，对我来说，原因是由于在我的JSX中调用了异步函数。见下文。

class App extends React.Component {
    showHello = async () => {
        const response = await someAPI.get("/api/endpoint");

        // Even with response ignored in JSX below, this JSX is not immediately returned, 
        // causing "Objects are not valid as a React child" error.
        return (<div>Hello!</div>);
    }

    render() {
        return (
            <div>
                {this.showHello()}
            </div>
        );
    }
}

我了解到，React不支持异步渲染。React团队正在研究此处记录的解决方案。

对于将Firebase与Android结合使用的任何人，这只会破坏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

我的事情与忘记发送到演示组件的道具周围的花括号有关：

之前：

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

后

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

我不得不将不必要的花括号放在render（）函数的return语句内包含HTML元素的变量周围。这使得React将其视为对象而不是元素。

render() {
  let element = (
    <div className="some-class">
      <span>Some text</span>
    </div>
  );

  return (
    {element}
  )
}

一旦从元素中删除了花括号，错误就消失了，并且元素正确呈现。

只是以为我会加上这个问题，因为今天我遇到了同样的问题，结果是因为我只返回了函数，所以当我将其包装在一个<div>标记中后，它就开始工作，如下所示

renderGallery() {
  const gallerySection = galleries.map((gallery, i) => {
    return (
      <div>
        ...
      </div>
    );
  });
  return (
    {gallerySection}
  );
}

以上导致错误。我通过将return()部分更改为解决了该问题：

return (
  <div>
    {gallerySection}
  </div>
);

...或简单地说：

return gallerySection

我只是遇到了相同的错误，但由于有一个不同的错误：我使用了像这样的双括号：

{{count}}

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

{count}

编译器大概变成了它{{count: count}}，即试图插入一个对象作为React子对象。

因此，当尝试显示createdAt日期对象的属性时出现了此错误。如果.toString()像这样最后连接，它将进行转换并消除错误。只是将其作为可能的答案发布，以防其他人遇到相同的问题：

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

我遇到了这个错误，结果是我无意中在我希望成为字符串值的JSX代码中包含一个对象：

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

breadcrumbElement过去是一个字符串，但是由于重构而成为对象。不幸的是，React的错误消息不能很好地指出问题所在。我必须一直跟踪堆栈跟踪，直到我意识到“ props”已传递到组件中，然后才发现有问题的代码。

您需要引用对象的属性（它是字符串值），或者将Object转换为所需的字符串表示形式。一种选择是，JSON.stringify如果您实际上想查看对象的内容。