我也有同样的问题。在我的情况下，我没有呈现项目的价值。我最初的代码是，

        keyExtractor={(item, index) => item.id}
        data={courseGoals} 
        renderItem={itemData => (
          <View style={styles.listitem}> 
              <Text>{itemData.item}</Text> 
          </View>
        )} 
      />

我只是简单地加了一句。价值’，而且它起作用了!

        keyExtractor={(item, index) => item.id}
        data={courseGoals} 
        renderItem={itemData => (
          <View style={styles.listitem}> 
              <Text>{itemData.item.value}</Text> 
          </View>
        )} 
      />

在您的状态下，home被初始化为一个数组 家庭:[]

在返回中，尝试呈现home(这是一个数组)。 < p >东西:{家园}< / p >

不能这样做——如果你想渲染它，你需要渲染一个数组到每个单独的项目。例如:使用map()

Ex:{家(item = >)的项目文件夹。

我也遇到过类似的问题，但我的这个方法奏效了。 我的输出

但我犯的错误很简单。在我的内容是超过两个，我已经忘记包装作为一个数组。我没有给卡莉戴牙套。

import React from 'react'
import {Button} from './Button';
import {Link} from 'react-router-dom'
import './HeroSection.css';

function HeroSection({
    lightBg, topLine, lightText, lightTextDesc, headline, description, 
    buttonLabel, img,alt,imgStart}
) {
    return (
        <>
            <div className={lightBg? 'home__hero-section': 'home__hero-section darkBg'}>
                <div className='container'>
                    <div className="row home__hero-row" 
                    style={{display:'flex', flexDirection:imgStart==='start'?' row-reverse':'row'}}
                    >
                    <div className='col'>
                        <div className='home__hero-text-wrapper'>
                            <div className='topline'>{topLine}</div>
                            <h1 className={lightText? 'heading': 'heading dark'}>{headline}</h1>
 <p className={lightTextDesc? 'home__hero-subtitle': 'home__hero-subtitle dark'}> 
 {description}
 <Link to='/sign-up'>
     <Button buttonSize='btn--wide' buttonColor='blue'>
{buttonLabel}
     </Button>
 </Link>
 </p>
                        </div>

                    </div>

                    <div className='col'>
                        <div className='home__hero-img-wrapper'>
                      <img src={img} alt={alt} className='home_hero-img'/>
                        </div>
                    </div>
                    </div>

                </div>

            </div>

        </>
    );
}

export default HeroSection

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

我面对的正是这个错误。在追踪这个问题的根本原因时，我发现FRONTEND代码(React)正在调用API，并通过访问该响应的某些属性在页面上显示响应! 在这种情况下，有两种情况

该属性在后台的响应中不存在(它会抛出不同的错误) 或 来自后端响应的属性是一个复杂的对象(对象中的对象)，我们的前端React组件试图访问它， 但是无法读取，因为React需要一个STRING(通过直接访问特定的属性，例如Object.property)或数组。(这种情况下)

所以我们收到这个错误，因为React期待STRING但得到了对象(因为你在对象内部传递object)。

请检查发送响应的后端逻辑(API)。

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

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

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。

虽然不是特定于答案，但此错误主要发生在在JavaScript上下文中使用{}错误地使用JavaScript表达式时。

例如

let x=5;

export default function App(){ return( {x} ); };

正确的做法是

let x=5;
export default function App(){ return( x ); };