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'))