Javascript 如果出现其他情况，则响应映射函数

我正在尝试使用map函数添加一个条件来显示电子邮件链接

如果项目包含电子邮件，则显示它

但是，它仍然不能正常工作，因为它应该显示“无链接”，控制台日志显示正确。如果有任何帮助，我将不胜感激

import React, { Component } from 'react';

import listIcon from '../img/list-icon.svg';

class FaqList extends Component {
  state = {
    items: [
      { id: 1, name: "Lorem.", answer: "Lorem ipsum dolor sit amet, consectetur adipisicing elit.", email: "hello@email.com", expanded: false },
      { id: 2, name: "Lorem.", answer: "Lorem ipsum dolor sit amet, consectetur adipisicing elit.", expanded: false }
    ]
  };

  render() {
    let link;

    const isEmail = this.state.items.map(item => {
      if (item.email) {
        console.log(item.email); // showing email
        link = 'show link';
      } else {
        link = 'no link';
      }
    });

    return this.state.items.map(el => (
      <div
        key={el.id}
        onClick={() => this.handleToggle(el.id)}
        className={el.expanded ? "faq__columns--item--active faq__columns--item" : "faq__columns--item"}
      >

        <div className="faq__content">
          <p className="mb-0">{el.answer}</p>

          {link} // Template here

        </div>
      </div>
    ));
  }

}

export default FaqList;

import React，{Component}来自'React'；
从“../img/list icon.svg”导入listIcon；
类FaqList扩展了组件{
状态={
项目：[
{id:1，姓名：“Lorem.”，回答：“Lorem ipsum door sit amet，Concertetur adipising elit.”，电子邮件：hello@email.com“，展开：false}，
{id:2，名称：“Lorem.”，回答：“Lorem ipsum door sit amet，concetetur adipising elit.”，扩展：false}
]
};
render（）{
让链接；
const isEmail=this.state.items.map（item=>{
如果（项目.电子邮件）{
console.log（item.email）；//显示电子邮件
链接='显示链接'；
}否则{
链接='无链接'；
}
});
返回此.state.items.map（el=>(
this.handleToggle（el.id）}
className={el.expanded？“常见问题解答列--项目--活动常见问题解答列--项目”：“常见问题解答列--项目”}
>
{el.answer}
{link}//此处为模板
));
}
}
导出默认FAQ列表；

您已经在

渲染

方法中映射了

项

。您不需要再次映射

项

来根据

email

键的存在与否来呈现一些UI，它可以发生在主

映射

中，就像这样（第38行）：

不需要isEmail，使用jsx power，您可以在render中的map函数中控制电子邮件链接的可见性，如下所示：

render() {
  return (
    <div>
      {this.state.items.map(el => (
        <div
          key={el.id}
          onClick={() => this.handleToggle(el.id)}
          className={
            el.expanded
              ? 'faq__columns--item--active faq__columns--item'
              : 'faq__columns--item'
          }
        >
          <div className="faq__content">
            <p className="mb-0">{el.answer}</p>
            {el.email && <div>email: {el.email}</div>}
          </div>
        </div>
      ))}
    </div>
  );
}

render（）{
返回(
{this.state.items.map（el=>(
this.handleToggle（el.id）}
类名={
扩大的
？“常见问题解答列--项目--活动常见问题解答列--项目”
：“常见问题解答列--项目”
}
>
{el.answer}
{el.email&&email:{el.email}
))}
);
}

试试这样的方法

 render() {
  return <>
   {this.state.items.map(el => (
      <div
        key={el.id}
        onClick={() => this.handleToggle(el.id)}
        className={el.expanded ? "faq__columns--item--active faq__columns--item" : "faq__columns--item"}
      >
        <div className="faq__content">
          <p className="mb-0">{el.answer}</p>
          {el.email ? <div>show link</div> : <div>no link</div>}
        </div>
      </div>
    ));}
   </>
  }

render（）{
返回
{this.state.items.map（el=>(
this.handleToggle（el.id）}
className={el.expanded？“常见问题解答列--项目--活动常见问题解答列--项目”：“常见问题解答列--项目”}
>
{el.answer}
{el.email？显示链接：无链接}
));}
}

看起来您的

链接

变量需要是一个对象，即：

{  
  1, 'show link',
  2, 'no link'},
  ...
}

。。。其中1，2，3。。。（键）是项目的id，因此您可以在render中添加如下链接：

{link[id]}//此处的模板

在这种情况下，这里有一个快速解决方案：

  const link = {};

  const isEmail = this.state.items.map(item => {
    if (item.email) {
      console.log(item.email); // showing email
      link[id] = 'show link';
    } else {
      link[id] = 'no link';
    }
  });

---

这就是你要找的吗

_render_email(obj){
obj.email && console.log(obj.email);
return (obj.email)? <div>obj.email</div> : null;
}

 render() {
    return this.state.items.map(el => (
      <div
        key={el.id}
        onClick={() => this.handleToggle(el.id)}
        className={el.expanded ? "faq__columns--item--active faq__columns--item" : "faq__columns--item"}
      >

        <div className="faq__content">
          <p className="mb-0">{el.answer}</p>

          {
               this._render_email(el)                   
          } // -> modified 

        </div>
      </div>
    ));
  }

\u呈现\u电子邮件（obj）{
obj.email&&console.log（obj.email）；
返回（obj.email）？obj.email:空；
}
render（）{
返回此.state.items.map（el=>(
this.handleToggle（el.id）}
className={el.expanded？“常见问题解答列--项目--活动常见问题解答列--项目”：“常见问题解答列--项目”}
>
{el.answer}
{
这是一封电子邮件（el）
}//->修改
));
}

您能分享您的输出吗？或者尝试创建一个提琴。如果您的最后一个项目为false，则所有项目都将返回

无链接

，如果您的最后一个项目为true，则所有项目都将返回

显示链接

。。不确定这是你想要的。用

{el.email？el.email:null}

替换

{link}//Template here

，

const-isEmail=
这也不是很有用，它只是一个
未定义的
@Ranjan数组。你的方式更干净，工作也更完美。也不需要创建新函数。太好了，非常感谢。我更喜欢使用三元运算符而不是
&&
，在
react native
项目中对我不起作用。我在react native中也这样使用它，也许你必须更新react native版本！