JS - React - map() 方法過濾元素索引（僅在索引滿足條件時運行）

Question

我有一個我想要迭代的列表。 並且基於它的索引它應該做一些事情。 它過濾它：

• 如果索引 == 0
• 如果索引高於 0 && 低於一半 array.length
• 如果索引高於一半 array.length

現在我有以下代碼。 它正在發揮作用。 但這並不有效。 因為它遍歷整個數組 3 次。 有沒有辦法過濾這個？

問題的核心：

            block.blockGrid.map((blockItem, index) => {
              if (index > 0 && index <= (newArrayLength / 2)) {
                <BlockGridElementFirstHalf key item={blockItem} index={index}/>
              }
            })

完整代碼：

class BlockGrid extends React.Component {

    render() {
      let {block} = this.props;

      const newArrayLength = (block.blockGrid.length % 2 === 0) ? block.blockGrid.length : block.blockGrid.length + 1;

      return (
        <React.Fragment>

          <Row>

            <Col xs={6}>
              {/*only run element 0 */}
              {block.blockGrid &&
              block.blockGrid.map((blockItem, index) => {
                if (index === 0) {
                  return <BlockGridElementZero key item={blockItem} index={index}/>
                }
              })}

              {/* only run element from 1 to half of length */}
              {block.blockGrid &&
              block.blockGrid.map((blockItem, index) => {
                if (index > 0 && index <= (newArrayLength / 2)) {
                  <BlockGridElementFirstHalf key item={blockItem} index={index}/>
                }
              })}
            </Col>

          </Row>

          <Row>

            <Col xs={6}>

              {/* only run element from half of length up to last */}
              {block.blockGrid &&
              block.blockGrid.map((blockItem, index) => {
                if (index > (newArrayLength / 2)) {
                  <BlockGridElementLastHalf key item={blockItem} index={index}/>
                }
              })}

            </Col>

          </Row>
        </React.Fragment>
      )
    }
  }

Answer 1

你能檢查一下這個代碼片段嗎？ https://stackblitz.com/edit/react-ygwbah

您可以像這樣過濾地圖：

myArray
    .filter((el, i) => (i === 0 ))
    .map((element, index) => {
      // do my code
    })
  }

Answer 2

試試這個，讓我知道這是否有幫助。 它只會遍歷您的項目一次 -

 class BlockGrid extends React.Component { 
    render() {
      let row1 = [], row2 = [];
      block.blockGrid && block.blockGrid.forEach((element, i) => {
        if (i == 0) {
          rows1.push(<BlockGridElementZero key item={blockItem} index={i} />);
        }
        else if (i > 0 && i <= (newArrayLength / 2) {
          rows1.push(<BlockGridElementFirstHalf key item={blockItem} index={i} />);
        }
        else {
          rows2.push(<BlockGridElementLastHalf key item={blockItem} index={i} />);
        }
      });
      return (
        <>
          <Row>
            <Col xs={6}>
              {row1}
            </Col>
          </Row>
          <Row>
            <Col xs={6}>
              {row2}
            </Col>
          </Row>
        </>
      );
    }
  }