In反应如何检查数组的每个元素并仅打印其中的一些元素

问题描述 投票:0回答:2

我是新来的反应者,有一个项目要做。我可以遍历所有数组。我只想检查一下数组并仅在其中包含特定信息时才显示。这是我的主要迭代代码。

      state = {
        top: [card1],
        bottom: [card2],
        rear: [card3],
        bottom2: [card4],
        bottom3: [card5],
        mycards: [card7,card8],
        myinfo: ["asd","card8"],
        transition: {
          item: null,
          startTop: 20,
          startAnim: true,
        }
      }

              <div ref={(node) => { this.mycardinfo = node; }}>
              {myinfo.map((item) => {
                const startTop = transition.item === item ? transition.startTop : 0;
                const animClass = transition.startAnim ? 'item-force-move' : '';
                const style = {
                  transform: `translateY(${startTop}px)`,
                }
                return (
                  <div 
                    className={`item item-mycard ${animClass}`}
                    onClick={(evt) => this.delete(item, evt)}
                    style={style}
                  >
                                {item}

                  </div>

我只想显示我的“ card8”元素。但是,当遍历所有数组时,它同时显示“ asd”和“ card8”。

javascript html css reactjs react-native
2个回答
0
投票

我只应用过滤器来检索项目:

myinfo.filter(item=> item === "card8")[0]

取决于您是否将有多个“ asd”项目,您可能希望删除索引。过滤器将返回与条件测试匹配的所有项目的列表,在这种情况下为item==="asd"


0
投票

只需使用if语句,如果不想映射它,则返回null:

if (item === "YOUR_CARD"){
  return <div>{item}</div>;
}else{
  return null;
}

编辑:正如其他人指出的,您也可以先过滤数组,然后映射它:

myinfo.filter(item => item === "YOUR_CARD")

如果只需要一张卡,请使用array.find,您将获得一个单件物品:

myinfo.find(item => item === "YOUR_CARD")
© www.soinside.com 2019 - 2024. All rights reserved.