React+Typescript 條件渲染

Question

我想為我擁有的每個個人資料創建一個選項。 我檢查了，我確實有一個配置文件，所以配置文件數組不是空的，並且 profile.profilename 不是未定義的。 它只是不渲染。

我看到了什么：圖片

<div className="col-4">
   <select name="profile" className="billingSelector">
         <option>Billing profile</option>
             {(getProfiles() as any).forEach((profile:Profile) => {
                  <option>{profile.profileName}</option>
              })}
   </select>
</div>

Answer 1

我找到了解決方案。 我使用 map 而不是 foreach 並且我刪除了花括號並使用了普通的。

<select name="profile" className="billingSelector">
   <option>Billing profile</option>
   {getProfiles().map((profile:Profile)=> (
        <option key={profile.profileName}>{profile.profileName}</option>
   ))}       
</select>

Answer 2

使用map而不是foreach 。

它們是有區別的。 Map 返回列表，foreach - 不是。

更多信息：

Array.prototype.forEach() - JavaScript | MDN

Array.prototype.map() - JavaScript | MDN

Answer 3

代替 foreach 你可以試試 map 嗎？ 例如

getProfiles().map((profile, index) => ({profile.profileName}));