满足条件后如何取消地图？答案

【问题标题】：How can I cancel a map once a condition has been met?满足条件后如何取消地图？
【发布时间】：2020-08-05 18:18:16
【问题描述】：

我想将 Erbenisen 的数组映射到一个 map 函数上，并在这个 map 函数中使用另一个 map 函数，这取决于数组是否包含 ID，向我显示相应的图标。问题是即使找到了 ID，该功能仍然可以正常工作。但我希望地图在找到 ID 时停止

  {ergebnis.map((e, index) => (

  [...]
  <IconButton aria-label="add to favorites">
              {gemerkt.map((ge) => {
                return ge.id_pdf == e.id ? (
                  <StarIcon
                    onClick={() => toggleStart(index, e.id)}
                    style={{ color: "#E69123", cursor: "pointer" }}
                  ></StarIcon>
                ) : (
                  <StarBorderIcon
                    onClick={() => toggleStart(index, e.id)}
                    style={{ cursor: "pointer" }}
                  />
                );
              })}
        </IconButton>
    [...]
  )

结果。如果 ID 在第二个数组中，我只想要一个填充的 Sstar，否则不填充。

【问题讨论】：

一般来说你不能停止map，除非你抛出一个错误。这是有根本原因的：map 使数组成为仿函数并满足仿函数定律，您在映射时不能更改数组长度。您可以使用filter + map 组合或reduce + some flag
@Captai-N 你检查我的答案了吗？

标签： reactjs

【解决方案1】：

我能想到的是使用slice 来获取gemerkt 的子数组并通过这种方式“强制”它停止渲染。

所以不是

{gemerkt.map((ge) => {

试试这个

{gemerkt.slice(0, gemerkt.findIndex(ge => ge.id_pdf == e.id) + 1).map((ge) => {

【讨论】：