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（转）

一个拿着底层薪资操着架构师心的码农 / 2023-05-04 / 原文

转自：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}的对象）。如果要呈现子对象集合，请改用数组。

原因一：想在react dom 里直接渲染对象

想在 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 取出属性来渲染。

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

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

原因二：react set 状态时把对象类型赋值给了基础类型的状态

useState 状态里设置状态的初始值是基本数据类型，比如0，'dd' 等，但是 set 状态时赋值了一个对象

案例

const [dataType, setDataType] = useState(0); // dataType 这一状态在设置初始值时设置的是一个number类型的数据
const testObj = {
  0: 'zhangsan',
  1: 'lisi',
}
setDataType(testObj); // 想把对象类型的数据，赋值到一个 number 类型的状态里，引发报错