在反应如何检查数组的每个元素并只打印其中一些元素答案

【问题标题】：In react how to check each element of array and print only some of them在反应如何检查数组的每个元素并只打印其中一些元素
【发布时间】：2020-05-03 08:31:57
【问题描述】：

我是新来的反应并且有一个项目要做。我可以迭代所有数组打印所有这些。我只是想检查我的数组并仅显示它是否包含特定信息。这是我的主要迭代代码。

      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

【解决方案1】：

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

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

根据您是否有多个“asd”项目，您可能需要删除索引。过滤器将返回所有符合条件测试的项目列表，在本例中为item==="asd"

【讨论】：

它也适用于 myinfo.filter(item=> item != "asd")[0]
如果过滤器返回一个空数组，这将失败。
是的，但是使用过滤器的概念仍然有效。正如我所说，您可能有多个匹配元素，所以这只是代表发布的案例。
但是如果我只想使用 item[0] 是否可以获得第 i 个元素？
是的，在过滤器函数中，第二个可选参数是索引。因此，您可以简单地执行以下操作：myinfo.filter((item,idx) => (item==="card8" && idx===0))

【解决方案2】：

只需使用 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")

【讨论】：

但是如果我只想使用 item[0] 是否可以获得第 i 个元素？