Objects are not valid as a React child，React渲染数组

在React中,如果直接渲染一个数组,通常会报错,但是如果在数组外层增加一层标签,就可以正常渲染了。这是因为React期望渲染的是有效的React元素,而不是一个普通的JavaScript数组。

export default function App() {
    let items = Array.from({ length: 3 });
    for (let i = 0; i < 3; i++) {
        items[i] = <div key={i}>{i}</div>;
    }
    // return <>{items}</>; // 正常渲染
    return {items}; // 报错： Objects are not valid as a React child (found: object with keys {items}). If you meant to render a collection of children, use an array instead.
}

export default function App() {
    let items = {
        name: "ww",
        age: 18
    };
    return <>{items}</>;  // 报错
    // return {items};   // 报错
}

Objects are not valid as a React child，React渲染数组

悦读