React中如何仅在屏幕≤600px时使用.slice(0,2)截取数组？

我希望在屏幕宽度为600px及以下时，对展示店铺图片的数组使用.slice(0,2)进行截取。目前已通过以下代码在React中监听屏幕是否符合≤600px的条件：

const [matches, setMatches] = useState(
    window.matchMedia("(max-width: 600px)").matches
)

useEffect(() => {
    window
    .matchMedia("(max-width: 600px)")
    .addEventListener('change', e => setMatches( e.matches ));
}, []);

当前展示图片的代码如下：

return (
    <div className="shopsHomeFeedImgsCont">
      {shops.map((shop) => (
        <img className="shopsHomeFeedImgs"
        src={shop.shopPic} />
      )).slice(0, 2)}
    </div>
);

请问如何实现仅在屏幕≤600px时才调用.slice(0,2)？

直接利用已有的matches状态控制数组是否截取即可：当屏幕宽度≤600px（matches为true）时截取数组前2项，否则展示全部内容。

修改后的渲染代码如下：

return (
    <div className="shopsHomeFeedImgsCont">
      {
        // 根据matches状态选择原数组或截取后的数组
        (matches ? shops.slice(0, 2) : shops).map((shop) => (
          <img 
            key={shop.id} // 必须添加唯一key，避免React列表渲染警告
            className="shopsHomeFeedImgs"
            src={shop.shopPic} 
            alt={shop.shopName || '店铺图片'} // 补充alt属性，提升页面可访问性
          />
        ))
      }
    </div>
);

几点优化说明 #

• 调整slice与map的顺序：先截取数组再执行map，比先映射所有元素再截取更高效，减少不必要的DOM节点创建。
• 添加key属性：这是React列表渲染的基础规范，能帮助React更高效地更新DOM，避免性能问题和控制台警告。
• 补充alt属性：为图片设置描述文本，让使用屏幕阅读器的用户也能理解图片内容，符合Web可访问性标准。

内容的提问来源于stack exchange，提问作者sultan.h