為什么我在 select 菜單中看不到任何類別選項？

Question

我正在使用此代碼將數據庫中的類別添加到 select 菜單，但它不起作用。

<select
        onChange={handleChange("category")}
        className="form-control"
        placeholder="Category"
      >
        <option>Select</option>
        {categories &&
          categories.map((cate, index) => {
            <option key={index} value={cate._id}>
              {cate.name}
            </option>
          })}
      </select>

我在“類別”數組中擁有數據庫中的所有類別，我已經在控制台中對其進行了測試，但在 select 選項中看不到

Answer 1

您必須從傳遞給categories.map的 function 返回 JSX。 由於您沒有返回任何內容，默認情況下任何 javascript function 將返回undefined 。 這意味着categories.map正在生成一個undefined數組。

{categories &&
   categories.map((cate, index) => {
     return (
       <option key={index} value={cate._id}>
         {cate.name}
       </option>
     );
   }
)}

您還可以隱式返回 JSX

{categories &&
   categories.map((cate, index) => (
       <option key={index} value={cate._id}>
         {cate.name}
       </option>
     )
)}