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才行

1.检查渲染的内容是否为对象：检查代码中是否存在直接将对象渲染到组件中的情况。如果存在，可以将对象转换为字符串或其他合法的 React 子元素再进行渲染。

2.使用 JSON.stringify() 方法将对象转换为字符串：如果需要在组件中渲染对象，可以使用 JSON.stringify() 方法将对象转换为字符串后再进行渲染