javascript - 尝试在 React JS 中渲染对象数组时出错

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 或 Fragment 中，因此假定它是一个对象，例如

return (
     {titlesCollection: titlesCollection}
);

因此你会得到一个错误，现在 titlesCollection 将是一个数组，你可以像使用 React.Fragment 一样

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

或者您可以在 titlesCollection 周围添加一个 div，例如

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

或者简单地返回 titlesCollection 就像

return titlesCollection;