Question

未捕获错误：对象作为React子对象无效（找到：具有键{titlesCollection}的对象）。如果您要渲染子集合，请使用数组

我在尝试渲染对象数组时遇到此错误，我在这里做错了什么？

import * as React from 'react';
import * as FontAwesomeIcon from 'react-fontawesome';
const data = {
  otherTitles:[
        {
            titleHeading:"X",
            titles:["A","B","C","D"]
        },
        {
            titleHeading:"Y Z",
            titles:["E","F","G","H"]
        }        
    ]
}

export class OtherTitlesCollection extends React.Component{

  render() {
    const titlesCollection = data.otherTitles.map((othertitle)=>{
        let dataId = othertitle.titleHeading.replace(' ','');
        return(
            <div key={dataId}>
                <div>
                    <FontAwesomeIcon name='plus-circle' data-toggle="collapse"
                    data-target={"#"+dataId} role="button" aria-expanded="false" aria-controls={dataId}/>
                    <label>{othertitle.titleHeading}</label>
                </div>
                <div  className="collapse" id ={dataId}>
                    {
                        othertitle.titles.map((title)=>{
                            return(<div key={title} style={{margin: "1px auto 1px 10px"}}>{title}</div>);
                        })
                    }
                </div>
            </div>
        )
    });
    return (
        {titlesCollection}
    );
  }
};

Answer 1

出现问题是因为您尝试渲染

return (
    {titlesCollection}
);

现在因为你没有在titlesCollection中包裹div, span or Fragment，所以假设它是一个像

这样的对象

return (
     {titlesCollection: titlesCollection}
);

因此您会收到错误，现在titlesCollection将成为您可以使用React.Fragment的数组

return (
     <React.Fragment>
         {titlesCollection}
     </ React.Fragment>
);

或者您可以在div周围添加titlesCollection

return (
     <div>{titlesCollection}</div>
);

或只是简单地返回titlesCollection

return titlesCollection;

Answer 2

这是工作示例

import React from 'react';
const data = {
    otherTitles:[
        {
            titleHeading:"X",
            titles:["A","B","C","D"]
        },
        {
            titleHeading:"Y Z",
            titles:["E","F","G","H"]
        }
    ]
}

class TestJS extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {

        let sample = [];
        let sampleData = data.otherTitles;

        for (let i = 0; i < sampleData.length; i++) {
            sample.push(
                <div key={i}>{sampleData[i].titleHeading} - {sampleData[i].titles}</div>
            )
        }

        return(
            <div id="root">
                <p>Hello world</p>
                <div>{sample}</div>
            </div>

        );
    }
}

export default TestJS;

Answer 3

import * as React from 'react';
import * as FontAwesomeIcon from 'react-fontawesome';
const data = {
  otherTitles:[
        {
            titleHeading:"X",
            titles:["A","B","C","D"]
        },
        {
            titleHeading:"Y Z",
            titles:["E","F","G","H"]
        }        
    ]
}

export class OtherTitlesCollection extends React.Component{

  render() {
    return data.otherTitles.map((othertitle)=>{
        let dataId = othertitle.titleHeading.replace(' ','');
        return(
            <div key={dataId}>
                <div>
                    <FontAwesomeIcon name='plus-circle' data-toggle="collapse"
                    data-target={"#"+dataId} role="button" aria-expanded="false" aria-controls={dataId}/>
                    <label>{othertitle.titleHeading}</label>
                </div>
                <div  className="collapse" id ={dataId}>
                    {
                        othertitle.titles.map((title)=>{
                            return(<div key={title} style={{margin: "1px auto 1px 10px"}}>{title}</div>);
                        })
                    }
                </div>
            </div>
        )
    });
   }
};

请尝试上面的代码，这对你有用，问题是你尝试返回titlesCollection变量，当它返回时它将不包含正确的数据，所以我们将直接返回循环数据

Answer 4

只需将<div>放在{titlesCollection}附近。

return (
  <div>{titlesCollection}</div>
);

尝试在react js中呈现对象数组时获取错误

4 个答案: