点击复选框后将数据存入useState并在另一表格展示的实现问题

你当前的问题核心是只用了一个布尔值isActive控制已选表格显示，并且直接遍历全部results数组，导致点击复选框后所有数据都被展示。要实现仅显示选中项，需要维护一个存储选中数据的数组，以下是具体修改方案：

1. 修改状态定义 #

替换原来的isActive布尔状态，改为用数组存储选中的用户对象：

// 替换原有的const [isActive, setIsActive] = useState(false)
const [selectedItems, setSelectedItems] = useState([]);

2. 调整全量产品表的复选框逻辑 #

点击复选框时，判断当前用户是否已被选中，执行「添加/移除」操作，用用户的id作为唯一标识（比name更可靠，避免重名问题），同时给复选框添加checked属性同步选中状态：

{results.map((res) => (
  <tr key={res.id} >
    <td className='flex items-center py-4'>
      <input 
        type="checkbox" 
        className='w-[19px] h-[19px] mr-[0.8rem] cursor-pointer'
        checked={selectedItems.some(item => item.id === res.id)}
        onClick={() => {
          setSelectedItems(prev => {
            const isSelected = prev.some(item => item.id === res.id);
            if (isSelected) {
              // 已选中则移除该用户
              return prev.filter(item => item.id !== res.id);
            } else {
              // 未选中则添加该用户
              return [...prev, res];
            }
          });
        }}
      />
      <div className='flex items-center gap-3'>
        <img src={avatar} alt="avatar" />
        <div>
          <div className='text-sm font-medium'>{res.name}</div>
          <div className='text-sm text-[#667085]'>{res.company.name}</div>
        </div>
      </div>
    </td>
    <td className='text-sm'>₹160</td>
    <td className='text-xs'>&#8226; Not Available</td>
  </tr>
))}

3. 修改已选产品表的渲染逻辑 #

直接遍历selectedItems数组，当数组为空时显示空状态提示：

{selectedItems.length > 0 ? (
  selectedItems.map((r) => (
    <tr key={r.id}>
      <td className='flex items-center py-4'>
        <div className='flex items-center gap-3'>
          <img src={avatar} alt="" />
          <div>
            <div className='text-sm font-medium'>{r.name}</div>
            <div className='text-sm text-[#667085]'>{r.company.name}</div>
          </div>
        </div>
      </td>
      <td className='text-sm'>₹160</td>
    </tr>
  ))
) : (
  <tr>
    <td colSpan="2" className='text-center py-4 text-sm text-[#667085]'>
      暂无选中项
    </td>
  </tr>
)}

补充说明 #

• 用用户id作为key和判断依据，避免因用户名重复导致的逻辑错误；
• 复选框的checked属性确保状态与选中数组同步，提升交互体验；
• 已选表格的空状态提示让界面逻辑更清晰。

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