React中的渲染对象属性

Question

我有一个这样的物体

export const otherInformation = [

{

    "FAQ": ['Getting started guide', 'Selling policy'],

    "Help & Support": ['Help guide', 'Selling policy'],

    "Legal": ['Terms of Use', 'Privacy Policy']

}]

我的密码

class Information extends Component {

    render() {

        const otherInformationLoop = otherInformation.map((value, key) => {

            return (

                <div>

                    <div className="col-md-4" key={key}>

                        <div className="dashboard-info">

                            {Object.keys(value).map((val, k) => {

                                return (<h4 k={k}>{val}</h4>)

                                })

                            }

                        </div>

                    </div>

                </div>

            )

        })

        return (

            { otherInformationLoop }

            // <div></div>

        );

    }

}

我在遍历对象时遇到麻烦。

获得的错误是这样的

Information.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object

我如何循环通过该对象，以便获得所获得的结果

提前致谢。任何帮助表示赞赏

Answer 1

您正在渲染数组，但只能从react组件返回一个块，将map函数包装在div中class Information extends Component {&nbsp; &nbsp; render() {&nbsp; &nbsp; &nbsp; &nbsp; const otherInformationLoop = otherInformation.map((value, key) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="col-md-4" key={key}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="dashboard-info">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {Object.keys(value).map((val, k) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return (<h4 k={k}>{val}</h4>)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>{ otherInformationLoop }</div>&nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; }}

Answer 2

实际上，render方法返回的对象只有一个otherInformationLoop属性。只需返回该值，而无需任何括号即可在React 16+中使用（但每个外部div都需要一个关键道具）