在React中渲染对象属性 [英] Render Object properties in React

问题描述

我有这样的对象

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

我在循环对象时遇到问题。

Im having trouble looping through the object.

获得的错误是这样的

Information.render（）：一个有效的React元素（或必须返回null）。您可能已经返回undefined，数组或其他一些无效对象

如何循环访问对象以获得获得的结果

How can I loop thorugh the object so that the obtained result is obtained

提前致谢。感谢任何帮助

Thanks in advance. Any help is appreciated

推荐答案

您正在渲染一个数组但是您只能从您的react组件返回一个块，包装您的地图div中的函数

You are rendering an array but you can only return a single block from your react component, wrap your map function within a div

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 (

            <div>{ otherInformationLoop }</div>
        );
    }
}

这篇关于在React中渲染对象属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！