我使用faker.js我期待公司字段是字符串，但它是一个数组 它是:

<div className='text-gray-400 text-sm'>works at {s.company}</div>

而应该是

<div className='text-gray-400 text-sm'>works at {s.company.name}</div>

我认为这不是程序员的错，世界是一个意想不到的地方，它的数据可能是任何东西。React应该指出准确的错误。

在我的情况下，我有一个添加的异步在app.js如下所示。

const App = async() => {
return(
<Text>Hello world</Text>
)
}

但这并不是必须的，在测试某些内容时，我已经添加了它，并且不再需要它。移除它之后，如下图所示，事情开始工作了。

 const App =() => {
    return(
    <Text>Hello world</Text>
    )
}

当我将Date对象(例如firebse中的时间戳)发送到React子组件时，发生了这个错误。

如果你将它作为子组件参数的值发送，你将发送一个复杂的对象，你可能会得到如上所述的相同错误。

您必须将该日期作为字符串值发送

        <p>{timestamp.toString()}</p>

应该可以这样工作。

您的数据家是一个数组，因此您必须使用array .prototype.map()迭代数组才能使其工作。

return (
    <div className="col">
      <h1>Mi Casa</h1>
      <p>This is my house y&apos;all!</p>
      {homes.map(home => <div>{home.name}</div>)}
    </div>
  );

我今天得到了同样的错误，但与这个问题中发布的场景相比，情况有所不同。希望下面的解决方案能帮助到一些人。

下面的渲染函数足以理解我的场景和解决方案:

render() {
    let orderDetails = null;
    if(this.props.loading){
        orderDetails = <Spinner />;
    }
    if(this.props.orders.length == 0){
        orderDetails = null;
    }
    orderDetails = (
        <div>
            {
                this.props.orders && 
                this.props.orders.length > 0 && 
                this.props.orders.map(order => (
                <Order 
                    key={order.id}
                    ingredient={order.ingredients}
                    price={order.price} />
                ))
            }
        </div>
    );
    return orderDetails;
}

在上面的代码片段中:如果return orderDetails作为return {orderDetails}发送，那么尽管'orderDetails'的值(值为<Spinner/>或null或与<Order />组件相关的JSX)，这个问题中发布的错误仍然会弹出。

错误描述:React -dom.development.js:57未捕获的不变性违规:对象作为React子对象无效(发现:带有键{orderDetails}的对象)。如果要呈现子元素的集合，请使用数组。

我们不能从render()方法内部的返回调用中返回JavaScript对象。原因是React期望一些JSX, false, null, undefined, true在UI中呈现，而不是一些JavaScript对象，当我使用返回{orderDetails}时，我试图呈现，因此得到如上所述的错误。

有效:

<div />

<div></div>

<div>{false}</div>

<div>{null}</div>

<div>{undefined}</div>

<div>{true}</div>

无效:

<div>{orderDetails}</div> // This is WRONG, orderDetails is an object and NOT a valid return value that React expects.

Edit: I also got this error on my company's test server used by QA's for their testing. I pointed my local code to that test server and tested the scenario in which this error was reported by QA team and found NO ERROR in my local machine. I got surprised. I re-checked multiple number of times, re-checked the scenario with QA team and I was doing right but still I was not able to replicate the issue. I consulted my fellow devs but still were not able to figure out the root cause. So keeping with the information in the error message I started scanning all the code I had deployed in my last deployment commit ( to be more specific last 4-5 commits because I suspected it could be there from last few deployments but was caught in the current deployment), especially all the components I had developed and found that there was a component - inside which there was no specified condition being met so it was returning NOTHING from it. So see below sample pseudo code. I hope it helps.

render () {
return (
    {this.props.condition1 && (
       return some jsx 1
    )}

    {this.props.condition1 && (
       return some jsx 2
    )})
}

如果你在上面的伪代码中看到，如果条件1和条件2不满足，那么这个组件将从它呈现NOTHING，理想情况下，react组件必须从它返回一些JSX, false, null, undefined, true。

同样的错误，但场景不同。 我的状态是

        this.state = {
        date: new Date()
    }

所以当我在我的类组件中问它时，我有

p>Date = {this.state.date}</p>

而不是

p>Date = {this.state.date.toLocaleDateString()}</p>