javascript - 如何在 map 期间将特定项目推送到新数组中？

Question

我正在映射一个对象数组。我只想显示可以放在一行中的项目。其他的必须推送到一个新数组中，该数组将显示在其他地方(“查看更多按钮”+弹出窗口)。

为了做到这一点，我在包含映射项目的 div 上有一个引用。一旦它的高度发生变化，我就知道我在另一条线上，并且是时候停止显示项目了。

我写道:

const Component = ({myArray}) => {
let ref = React.useRef();
const { height, width } = useSize(ref);
const availableSpace = 24;
const otherArray = [];

return (  
  <div ref={ref} style={{display: "flex" flexWrap:"flew-wrap"}}>
   {myArray.map({label} => {
        height > 24 && otherArray.push({label});
        return (
            //stuff
         )
      })}
    {otherArray && otherArray.length > 0 && (
    <button onClick={()=> showRemainingItemsInAPopover}>
        +{otherArray.length}
    </button>
    )}
    )
   }

遗憾的是，React 渲染了所有项目，然后将所有项目再次推送到 otherArray 中。

如何实时正确地将我的数组分成两部分？

谢谢!

Answer 1

也许你可以使用过滤功能:

 <div ref={ref}>
  {myArray.map({label} => {
    height > 24 && otherArray.push({label});
    return (
        //stuff
     )
  }).filter(() => height <= 24)}

但我希望看到更多代码来为您提供更多帮助。