react报错 Uncaught Error: Objects are not valid as a React child (found: object with keys {a} ...

一、报错信息

Uncaught Error: Objects are not valid as a React child (found: object with keys {content, key, duration}). If you meant to render a collection of children, use an array instead. 

报错截图

 意思是:未捕获错误:对象作为React子对象无效(找到:具有键{content,key,duration}的对象)。如果要呈现子对象集合,请改用数组。

什么原因导致的:

主要是在render函数里直接渲染一个对象造成的 。 react里 数组和字符串可以直接渲染,唯独对象不可以。

下面的例子里

 obj是一个对象 里面有a 属性,而我 直接在 render 里 渲染了 obj 。正确 应该是 obj.a才对 ,react里要渲染对象 必须是 对象.属性形式(obj.key、obj[key]) 。或者你 遍历也行。

class Index extends Component {
    constructor(props) {
        super(props);
        
    }
    componentDidMount() {
       
    }
    
    render() {
      let obj={ //一个对象  直接渲染就会出现
		  a:"00"
	  }
        return (
            <div>
              {obj}
            </div>
        )
    }

}

我的问题是表格里columns 里,message是一个对象(后端返回的 数据 message不是字符串也不是数组 是一个 对象形式,react里 数组和字符串可以直接渲染,唯独对象不可以),所以会报错 

[
{

 title:"rr",
 dataIndex:"message",
 align:"center"
}
]

造成这个错误的可能 不止这种情形 ,也可能其它原因,我遇到的是这种情形。

补充:react里 数组可以直接 渲染 只不过 它会显示成一个字符串形式

例如:

class Index extends Component {
    state = {
     
    };

    componentDidMount() {
     

    }
    render() {
        let a=[1,3,4];
        let a1=["我","爱","你"];
        return (
            <div>
                  
                  <p>{a}</p>
                  <p>{a1}</p>

            </div>
        )
    }
}

效果如下: 

二、解决方案:

避免直接渲染Object 类型的数据 。

比如上面的得obj.a才行

猜你喜欢

转载自blog.csdn.net/weixin_44058725/article/details/119951938#comments_22680590
今日推荐