在 React 中渲染对象属性-前端问题

Render Object properties in React(在 React 中渲染对象属性)

本文介绍了在 React 中渲染对象属性的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个这样的对象

export const otherInformation = [{"FAQ": ['入门指南', '销售政策'],"帮助与支持": ['帮助指南', '销售政策'],法律":[使用条款"、隐私政策"]}]

我的代码

类信息扩展组件{使成为() {const otherInformationLoop = otherInformation.map((value, key) => {返回 (<div className="col-md-4" key={key}><div className="仪表板信息">{Object.keys(value).map((val, k) => {返回 (<h4 k={k}>{val}</h4>)})}</div></div></div>)})返回 ({其他信息循环}//<div></div>);}}

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

得到的错误是这样的

Information.render():必须返回一个有效的 React 元素(或 null).您可能返回了未定义、数组或其他一些无效对象

如何循环遍历对象，从而得到得到的结果

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

解决方案

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

类信息扩展组件{使成为() {const otherInformationLoop = otherInformation.map((value, key) => {返回 (<div className="col-md-4" key={key}><div className="仪表板信息">{Object.keys(value).map((val, k) => {返回 (<h4 k={k}>{val}</h4>)})}</div></div></div>)})返回 (<div>{ otherInformationLoop }</div>);}}

I have a object like this

export const otherInformation = [
{
    "FAQ": ['Getting started guide', 'Selling policy'],
    "Help & Support": ['Help guide', 'Selling policy'],
    "Legal": ['Terms of Use', 'Privacy Policy']
}]

My code

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.

Error obtained is like this

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

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

Thanks in advance. Any help is appreciated

解决方案

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 中渲染对象属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！