javascript中的map函數不適用於React組件

Question

我正在ReactJs中的一個項目上工作。我在javascript中有一個數組，其值將來自后端。因此，數組的長度將是動態的。所以，我希望我的UI如果數組元素發生變化包含字符串“無電子郵件警報”。 因此，我在數組組件上編寫了一個映射，並嘗試通過以下方式呈現它：

 {this.state.options.map((email, i) => {
          return (
            <Something />   
                {!(email[i].includes('No Email Alerts')) ? (
                  <Some_Other_UI />
                ) :

                  null}

但是，我現在面臨的問題是我無法排除包含“無電子郵件警報”的部分並呈現不同的UI。 我的意思是我的

{!(email[i].includes('No Email Alerts')) ? (
                      <Some_Other_UI />
                    ) :

                      null}

不管用。 我究竟做錯了什么？ 有人請指導我。

Answer 1

映射參數email和i用於this.state.options ，而i可以用於this.state.options數組，不僅用於email （不過，如果email具有相似的索引，則可以使用）。 另外，您需要將它們包裝在一個元素中，或者也可以使用fragment ：

{
 this.state.options.map((email, i, arr) => {
   return (
     <div key={email+'-'+i}>{/* provide the key as you wish */}
        <Something />   
        {!(arr[i].includes('No Email Alerts')) ? (
           <Some_Other_UI />
         ) :
        null}
     </div>
   )
}

我也建議使用trim並檢查是否包含小寫字母，例如：

!(arr[i].trim().toLowerCase().includes('no email alerts'))