Javascript 尝试在react js中呈现对象数组时出错

未捕获错误：对象作为React子对象无效（找到：具有键{titleCollection}的对象）。如果要呈现子对象集合，请改用数组

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

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}
    );
  }
};

import*as React from'React'；
从“react Fontaweasome”导入*作为Fontaweasome图标；
常数数据={
其他标题：[
{
标题：“X”，
标题：[“A”、“B”、“C”、“D”]
},
{
标题：“YZ”，
标题：[“E”、“F”、“G”、“H”]
}        
]
}
导出类OtherTitleCollection扩展React.Component{
render（）{
const titleCollection=data.otherTitles.map（（othertitle）=>{
让dataId=othertitle.titleHeading.replace（“”，”）；
返回(
{othertitle.titleHeading}
{
othertitle.titles.map（（title）=>{
返回（{title}）；
})
}
)
});
返回(
{titlesCollection}
);
}
};

下面是一个工作示例

从“React”导入React；
常数数据={
其他标题：[
{
标题：“X”，
标题：[“A”、“B”、“C”、“D”]
},
{
标题：“YZ”，
标题：[“E”、“F”、“G”、“H”]
}
]
}
类TestJS扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
设样本=[]；
让sampleData=data.otherTitles；
for（设i=0；i
{sample}
);
}
}
导出默认TestJS
import*作为来自“React”的React；
从“react Fontaweasome”导入*作为Fontaweasome图标；
常数数据={
其他标题：[
{
标题：“X”，
标题：[“A”、“B”、“C”、“D”]
},
{
标题：“YZ”，
标题：[“E”、“F”、“G”、“H”]
}        
]
}
导出类OtherTitleCollection扩展React.Component{
render（）{
返回data.otherTitles.map（（othertitle）=>{
让dataId=othertitle.titleHeading.replace（“”，”）；
返回(
{othertitle.titleHeading}
{
othertitle.titles.map（（title）=>{
返回（{title}）；
})
}
)
});
}
};

请尝试上面的代码这对您有效，这里的问题是您尝试返回TitleCollection变量，返回时它将不包含正确的数据，因此我们将直接返回循环数据
只需将
放在
{titleCollection}
周围即可

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

返回(
{titlesCollection}
);
出现问题的原因是您试图渲染

return (
    {titlesCollection}
);

现在，由于您没有将
标题集合
包装在
div、span或Fragment
中，因此假定它是一个类似

return (
     {titlesCollection: titlesCollection}
);

因此，您会得到一个错误，
titlescolection
将是一个数组，您可以像这样使用
React.Fragment

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

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

return titlesCollection;

或者只需返回
titlescolection
like

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

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

return titlesCollection;