这个问题是因为您试图显示整个对象，而不是对象内部的键。

例如:数据是

[
    {
        "status": "success",
        "count": 20511
    },
    {
        "status": "failure",
        "count": 1776
    }
]

现在，在如下所示的组件中，这将工作。

import React, { Component } from 'react';


export default class Display extends Component {

    render() {

        const { data } = this.props;

        return (
            <>
           
               {
                   data.map((value,key)=>
                       <div>{value.status}</div>
                       <div>{value.count}</div>
                   )
               }
            </>

        )
    }
}

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

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

在JavaScript中，数组和集合是不同的，尽管它们有点相似，但在这里react需要一个数组。 您需要从集合中创建一个数组并应用它。

let homeArray = new Array(homes.length);
let i = 0

for (var key in homes) {
    homeArray[i] =  homes[key];
    i = i + 1;
}

我也发生了错误，我通过删除花括号来解决它，希望它能帮助其他人。

你可以看到，我没有把con放在花括号里，错误发生了，当我移除粗括号时，错误消失了。

const modal = (props) => {
const { show, onClose } = props;

let con = <div className="modal" onClick={onClose}>
        {props.children}
        </div>;

return show === true ? (
    {con}
) : (
    <div>hello</div>
);

有一篇文章是关于花括号的用法的。点击这里

当我试图在接收道具的子组件上渲染对象时，我遇到了这个问题。

当我意识到我的代码试图呈现一个对象，而不是我试图呈现的对象键的值时，我修复了这个问题。

我也有同样的问题，然后我意识到我犯了有史以来最愚蠢的错误。我让我的组件是异步的，我的意思是我使用了async关键字，就像这样

const ComponentName = async () => {
  return <>
   <div>This a WRONG component</div>
 </>
}

然后，在经历了很多头疼和祈祷之后，我意识到我的愚蠢错误，并删除了async。

const ComponentName = () => {
  return <>
   <div>This a WRONG component</div>
 </>
}