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

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

问题描述

我有一个这样的对象

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

我的代码

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

)})返回 ({ 其他信息循环 }//<div></div>);}}

我在遍历对象时遇到问题.

得到的错误是这样的

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

如何遍历对象以获取结果

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

解决方案

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

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

)})返回 (<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 中的渲染对象属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆