ReactJS中如何正确比较数组返回值与数值类型id

判断逻辑始终不生效是三个写法错误导致的：

• canIBook() 当前返回值是包装对象 { result: [已预约id数组] }，既不是单个数值，也不是直接返回id数组，拿数值类型的自增id和对象做===严格比较，永远不会得到true
• 就算取到了内部的id数组，数组是引用类型，直接和基础类型的数值做相等判断也无法得到预期结果，且每次循环都重复调用canIBook()做全量过滤、映射，存在不必要的性能损耗
• 原逻辑里id++写在按钮渲染分支里，会导致id计数和实际渲染的元素错位，判断时机不对

1. 简化canIBook()的返回值，直接返回已预约的id数组，去掉多余的对象包装
2. 在渲染逻辑最外层提前调用一次canIBook()拿到所有已预约id，推荐存入Set结构获得更高的查询效率，不要在循环判断里重复调用方法
3. 修正id的计数逻辑：每渲染一个时隙先取当前id值做判断，再执行自增，保证判断逻辑和按钮绑定的id值完全一致

const canIBook = () => {
  const bookedSlots = freeSlotsList.filter((slot) => slot.booked === 1);
  // 直接返回id数组，不做多余包装
  return bookedSlots.map((slot) => slot.id);
};

const renderTableData = () => {
  let id = 1;
  const activeButton = () => {};
  // 一次性获取所有已预约id，用Set存储查询效率更高
  const bookedIdSet = new Set(canIBook());
  
  return (
    <tr>
      {days.map((val) => (
        <td>
          {timeSlot.map((n, i) => {
            // 先取当前id，再自增，保证判断和按钮绑定的id值一致
            const currentSlotId = id++;
            if (bookedIdSet.has(currentSlotId)) {
              return <h1>Works</h1>;
            }
            return (
              <button id={currentSlotId} className={activeButton}>
                {n} {currentSlotId}
              </button>
            );
          })}
        </td>
      ))}
    </tr>
  );
};

如果你的项目数据量很小，不想用Set，也可以直接用数组的includes方法判断，把判断条件改成bookedIdArray.includes(currentSlotId)即可，效果一致。

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