我正在映射一个对象数组。我只想显示可以放在一行中的项目。其他的必须推送到一个新数组中,该数组将显示在其他地方(“查看更多按钮”+弹出窗口)。
为了做到这一点,我在包含映射项目的 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 中。
如何实时正确地将我的数组分成两部分?
谢谢!
最佳答案
也许你可以使用过滤功能:
<div ref={ref}>
{myArray.map({label} => {
height > 24 && otherArray.push({label});
return (
//stuff
)
}).filter(() => height <= 24)}
但我希望看到更多代码来为您提供更多帮助。
关于javascript - 如何在 map 期间将特定项目推送到新数组中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60005850/