[英]Reactjs select box fail to append option value
{this.props.datacat.forEach(function (key,value) {
Object.keys(key).forEach(function(key2,value2) {
console.log("yes");
if(key2 == 'name'){
return <Option value="zzz" key="bbb">fff</Option>;
}
})
})}
//this.props.datacat的数据
[
{
"4967": "Others.",
"4968": "Sports & Beachwear > Others.",
"4969": "Lingerie & Nightwear > Others.",
"4971": "Pants & Shorts > Others.",
"name": "Women Clothes"
},
{
"4798": "Supplements > Others.",
"4802": "Men's Grooming > Others.",
"4952": "Others.",
"4953": "Medical Supplies > Others.",
"4954": "Personal Pleasure > Others.",
"4955": "Personal Care > Others.",
"4956": "Pedicure & Manicure > Others.",
"6647": "Lips > Lip Tint"
"name": "Health & Beauty"
}
]
我是 reactjs 的初学者,我有一些数据,想遍历它并渲染到 select 框值。 在上面的代码中,我尝试循环数据并渲染到 select 框选项值。 它在控制台日志中成功打印 yes,但 html 未按预期呈现。 有人遇到过这样的问题吗? 请帮忙:(。
forEach方法只循环项目。 我敦促您尝试.map阵列辅助方法。
要使用.forEach,请创建空数组并推入您的 Option 组件。
然后返回你的空数组
首先使用map
渲染项目,其次,您还需要返回 object 的任何返回,因为这是我们需要遍历的双循环。
const data = [ { "4967": "Others.", "4968": "Sports & Beachwear > Others.", "4969": "Lingerie & Nightwear > Others.", "4971": "Pants & Shorts > Others.", name: "Women Clothes" }, { "4798": "Supplements > Others.", "4802": "Men's Grooming > Others.", "4952": "Others.", "4953": "Medical Supplies > Others.", "4954": "Personal Pleasure > Others.", "4955": "Personal Care > Others.", "4956": "Pedicure & Manicure > Others.", "6647": "Lips > Lip Tint", name: "Health & Beauty" } ]; class App extends React.Component { render() { return data.map(singleData=>{ return Object.keys(singleData).map(key=>{ if(key==='name'){ return <div>{singleData[key]}</div> } }) }) } } ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.