Question

我正在ReactJs中的一个项目上工作。我在javascript中有一个数组，其值将来自后端。所以，数组的长度将是动态的。所以，我希望我的UI可以更改数组元素包含字符串“ No Email Alerts”。因此，我在数组组件上编写了一个映射，并尝试通过以下方式呈现它：

 {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数组（如果电子邮件具有相似的索引，则可以使用）。另外，您需要将它们包装在一个元素中，或者也可以使用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'))

javascript中的map函数不适用于React组件

1 个答案: