尝试在 React js 中渲染对象数组时出错答案

【问题标题】：Getting error while trying to render array of object in react js尝试在 React js 中渲染对象数组时出错
【发布时间】：2018-03-19 06:34:13
【问题描述】：

未捕获的错误：对象作为 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}
    );
  }
};

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

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

return (
    {titlesCollection}
);

现在，由于您没有将 titlesCollection 包装在 div, span or Fragment 中，因此假定它是一个类似的对象

return (
     {titlesCollection: titlesCollection}
);

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

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

或者你可以在titlesCollection 周围添加一个div 喜欢

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

或者直接返回titlesCollectionlike

return titlesCollection;

【讨论】：

【解决方案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;

【讨论】：

【解决方案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变量，它返回时不包含正确的数据，所以我们将直接返回循环数据

【讨论】：

【解决方案4】：

只需将<div> 放在{titlesCollection} 周围即可。

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

【讨论】：