在 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>
);
}
}
相关文章