React实现仅展示附件数组首个元素并显示剩余隐藏元素数量的技术求助

Hey there! Let's adjust your code to get the exact behavior you want—only showing the first attachment and a count of the hidden ones. The problem with your current code is that you're looping through every item in the array, which renders all attachments. Here's the fix:

<div className={Styles.attachments}>
  {/* Only render the first attachment if the array isn't empty */}
  {data.length > 0 && (
    <Attachment key={data[0].id} data={data[0]} image={data[0].img} />
  )}
  {/* Show the "more" count only when there are additional items */}
  {data.length > 1 && (
    <span className={Styles.more}>+{data.length - 1} more</span>
  )}
</div>

What changed: #

• Instead of using map() to render every item, we directly access the first element of the array (data[0]) and render it conditionally (so we don't try to render anything if the array is empty).
• We kept the conditional check for the "more" label—this will only appear when there are 2 or more attachments, showing the correct number of hidden items.

Quick edge case tip: #

If you ever need to handle an empty data array gracefully (like showing a "No attachments" message), you can extend the code like this:

<div className={Styles.attachments}>
  {data.length === 0 ? (
    <span className={Styles.noAttachments}>No attachments available</span>
  ) : (
    <>
      <Attachment key={data[0].id} data={data[0]} image={data[0].img} />
      {data.length > 1 && (
        <span className={Styles.more}>+{data.length - 1} more</span>
      )}
    </>
  )}
</div>

That should give you the exact behavior you described: showing only the first attachment followed by "+N more" when there are additional items hidden.

内容的提问来源于stack exchange，提问作者Vardan Hambardzumyan