React映射eligible为true的用户到Tailwind CSS Grid时重复渲染问题求助

Let's break down what's going wrong here, then fix it step by step.

The Root Cause #

Right now, every time your code hits a user with eligible: true, it returns three separate <li> elements wrapped in a React fragment. Since you have 3 eligible users, that's 3 × 3 = 9 grid items total—way more than you intended. The fragment doesn't combine the <li>s into one; it just lets you return multiple elements from the map function without extra wrapping tags.

Solution 1: Filter Eligible Users & Style by Index #

If you want one grid item per eligible user, with different row spans for each, first filter out the ineligible users, then map over the remaining ones and apply styles based on their position in the list:

// First, filter to get only eligible users
const eligibleUsers = users.filter(user => user.eligible);

<ul className="grid grid-rows-3 grid-flow-col gap-4 mt-4 px-10">
  {eligibleUsers.map((user, index) => {
    // Build the class list based on the item's index
    let itemClasses = "shadow-lg bg-green-100 text-green-500 text-lg font-bold text-center p-10 rounded-lg";
    if (index === 0) {
      itemClasses += " row-span-3 col-span-1";
    } else if (index === 1) {
      itemClasses += " row-span-2";
    }
    // The third item uses the base class with no extra span

    // Don't forget a unique key for React list items!
    return (
      <li key={user.name} className={itemClasses}>
        {user.name}
        <img src={user.pic} alt={`${user.name}'s profile`} />
      </li>
    );
  })}
</ul>

Solution 2: Target Specific Users for Fixed Layout #

If your goal was to assign those exact three styles to the three eligible users specifically (John, David, Sarah), you can render each item directly instead of mapping:

<ul className="grid grid-rows-3 grid-flow-col gap-4 mt-4 px-10">
  {/* John with full row span */}
  <li className="shadow-lg bg-green-100 text-green-500 text-lg font-bold text-center p-10 rounded-lg row-span-3 col-span-1">
    John
    <img src={users.find(u => u.name === 'John').pic} alt="John" />
  </li>
  {/* David with 2-row span */}
  <li className="shadow-lg bg-green-100 text-green-500 text-lg font-bold text-center p-10 rounded-lg row-span-2">
    David
    <img src={users.find(u => u.name === 'David').pic} alt="David" />
  </li>
  {/* Sarah with default span */}
  <li className="shadow-lg bg-green-100 text-green-500 text-lg font-bold text-center p-10 rounded-lg">
    Sarah
    <img src={users.find(u => u.name === 'Sarah').pic} alt="Sarah" />
  </li>
</ul>

Quick Best Practice Note #

Always add a unique key prop to elements rendered in a list (like we did with user.name in Solution 1). This helps React track which items have changed, been added, or removed, preventing unnecessary re-renders and bugs.

内容的提问来源于stack exchange，提问作者Luke Skywalker