React中JSON对象数组使用includes做条件渲染不生效如何解决

• Array.includes() 使用**严格相等（===）**做匹配，你的freeSlotsList存储的是完整的时段对象，不是单独的ID数字，直接传入数字做匹配时，本质是在判断「对象 === 数字」，结果永远为false，自然无法进入分支。
• 你后续修改为传入id变量仍然不生效，原因完全一致：数字类型的id和数组里的对象类型元素不可能严格相等。
• 额外的逻辑隐患：你在renderTableData函数内部声明let id = 1，每次组件重渲染、函数重新执行时id都会重置为1，用id++做递增值很容易出现计数和预期不符的问题。

核心逻辑是：判断当前要匹配的ID，是否存在于freeSlotsList某一项的id字段中，不要直接拿数字和数组里的对象做匹配。

写法1：直接用Array.some()判断（最简洁） #

直接替换原有if判断即可，不需要额外预处理数据：

// 原if (freeSlotsList.includes(1) == true) 替换为下面的逻辑
// 注意不要多写 == true，if本身会接收布尔值，多余的相等判断反而可能引发隐式类型转换问题
if (freeSlotsList.some(slot => slot.id === id)) {
  return <h1>Testing</h1>;
}

写法2：提前提取ID列表再匹配（适合多场景复用判断） #

如果组件里多处需要判断时段是否空闲，可以提前把所有空闲ID提取为纯数字数组，再用includes判断：

// 组件内、renderTableData函数外提前计算，依赖freeSlotsList变化自动更新
const freeSlotIds = freeSlotsList.map(slot => slot.id);

const renderTableData = () => {
  // 去掉原来的let id = 1，直接用map的索引生成当前id更稳定
  return (
    <tr>
      {days.map((val) => (
        <td>
          {timeSlot.map((n, i) => {
            const currentId = i + 1;
            if (freeSlotIds.includes(currentId)) {
              return <h1>Testing</h1>;
            }
            return (
              <button id={currentId} className={activeButton}>
                {n}
              </button>
            );
          })}
        </td>
      ))}
    </tr>
  );
};

补充说明：useEffect里的异步接口请求不会阻塞首次渲染，首次渲染时freeSlotsList是空数组属于正常现象，状态更新后组件会自动重渲染，不需要额外做特殊处理，只要判断逻辑写对即可正常生效。

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