Javascript 向状态添加数据

我从另一个文件导入了collections变量，现在正试图将其添加到我的状态。这是怎么回事

---

未捕获错误：对象作为React子对象无效（找到：具有键{id，name，masterAssetId，tags}的对象）。如果要呈现子对象集合，请改用数组。 在p中（在App.js:17）

---

未捕获错误：对象作为React子对象无效（找到：具有键{id，name，masterAssetId，tags}的对象）。如果要呈现子对象集合，请改用数组。 在p中（在App.js:17） 在div中（在App.js:16中）

---

App.js

import React from 'react';
import './App.css';
import {collections} from "./data.js"

class App extends React.Component {
    constructor() {
        super()

        this.state = {
           collectionsarr: collections
        }
    }
  
  render(){
  return (
          <div className="App">
            <p>{this.state.collectionsarr[0]}</p>

            <h1>Charles</h1>

            {/* <h1>{collections[0].name}</h1> */}
          </div>
        )
  }
}

export default App

const collections = [
    {
        id: 1,
        name: "The Simpsons",
        masterAssetId: 13,
        tags: {
            name: "Cartoon",
            subTag: {
                name: "Simpsons family",
                subTag: {
                    name: "2014",
                },
            },
        },
    },
    {
        id: 2,
        name: "Super heroes",
        masterAssetId: 24,
        tags: {
            name: "DC Super heroes",
            subTag: {
                name: "2014",
            },
        },
    },
    {
        id: 3,
        name: "Toy story",
        masterAssetId: 31,
        tags: {
            name: "Disney",
            subTag: {
                name: "Pixar",
                subTag: {
                    name: "Original movie",
                    subTag: {
                        name: "2010",
                    },
                },
            },
        },
    },
    {
        id: 4,
        name: "Ninjago",
        masterAssetId: 42,
        tags: {
            name: "Ninja",
            subTag: {
                name: "Secret Ninja Force",
                subTag: {
                    name: "2017",
                },
            },
        },
    },
];

const assets = [
    {
        id: 11,
        name: "Homer Simpson",
        path: "Homer.jpg",
        collectionId: 1,
    },
    {
        id: 12,
        name: "Lisa Simpson",
        path: "Lisa.jpg",
        collectionId: 1,
    },
    {
        id: 13,
        name: "Bart Simpson",
        path: "Bart.jpg",
        collectionId: 1,
    },
    {
        id: 14,
        name: "Marge Simpson",
        path: "Marge.jpg",
        collectionId: 1,
    },
    {
        id: 15,
        name: "Grampa Simpson",
        path: "Grampa.jpg",
        collectionId: 1,
    },
    {
        id: 16,
        name: "Maggie Simpson",
        path: "Maggie.jpg",
        collectionId: 1,
    },
    {
        id: 21,
        name: "Green Lantern",
        path: "Green lantern.jpg",
        collectionId: 2,
    },
    {
        id: 22,
        name: "Flash",
        path: "Flash.jpg",
        collectionId: 2,
    },
    {
        id: 23,
        name: "Batman",
        path: "Batman.jpg",
        collectionId: 2,
    },
    {
        id: 24,
        name: "Superman",
        path: "Superman.jpg",
        collectionId: 2,
    },
    {
        id: 31,
        name: "Buzz Lightyear",
        path: "Buzz.jpg",
        collectionId: 3,
    },
    {
        id: 32,
        name: "Alien",
        path: "Alien.jpg",
        collectionId: 3,
    },
    {
        id: 41,
        name: "Spinjitzu training Nya",
        path: "Nya.jpg",
        collectionId: 4,
    },
    {
        id: 42,
        name: "Master Wu",
        path: "Wu.jpg",
        collectionId: 4,
    },
    {
        id: 43,
        name: "Lloyd",
        path: "Lloyd.jpg",
        collectionId: 4,
    },
];

export const getCollectionsAsync = () => {
    return new Promise((resolve) => setTimeout(() => resolve(collections), 1000));
};

export const getAssetByIdAsync = (assetId) => {
    const asset = assets.find((a) => a.id === assetId);

    if (!asset) {
        throw new Error("Asset not found" + assetId);
    }

    return new Promise((resolve) => setTimeout(() => resolve(asset), 500));
};

export const getAssetsByCollectionAsync = (collectionId) => {
    const collectionAssets = assets.filter((asset) => asset.collectionId === collectionId);

    return new Promise((resolve) => setTimeout(() => resolve(collectionAssets), 1000));
};

export {collections}

---

问题在于这条线

<p>{this.state.collectionsarr[0]}</p>

---

您需要通过

collectionsarr

映射

，并写入每个对象的collectionsarr名称

返回(
{this.state.collectionsarr.map（（collection）=>(
{collection.name}

))}
查尔斯
)
}
我觉得这个代码不错。你在使用它时遇到了什么问题？@richytong:我添加了错误扫描you share data.js？在问题中添加了data.js，你想在标签内打印什么？
<p>{JSON.stringify(this.state.collectionsarr[0])}</p>