Reactjs select 盒子不符合 append 選項值

Question

{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 未按預期呈現。 有人遇到過這樣的問題嗎？ 請幫忙：（。

用戶界面

控制台日志

Answer 1

forEach方法只循環項目。 我敦促您嘗試.map陣列輔助方法。

要使用.forEach，請創建空數組並推入您的 Option 組件。

然后返回你的空數組

Answer 2

首先使用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>