ReactJS中如何在if语句内访问数组输出控制按钮状态

你现有代码的逻辑无法实现需求，核心问题有两个：

• 你调用freeSlotsList.some(slot => slot.booked === 1)的判断逻辑是错的：some方法只要预约列表里存在任意一个已预约的slot，就会返回true，会把所有按钮都标记成已预约状态，根本无法对应到当前正在渲染的单个时间段的预约状态。
• 你错误地把JSX元素传给了className属性，className只能接收字符串格式的样式类名，同时你没有给按钮添加原生的disabled属性来实现禁用效果。

你不需要特殊处理if语句的返回值，只需要把单个时间段的预约判断结果存成布尔变量，后续所有状态逻辑都复用这个变量即可，步骤如下：

1. 提前写好已预约按钮的红色样式类
2. 遍历时间段的时候，针对当前渲染的单个时间段，判断它是否匹配已预约的slot
3. 匹配成功的按钮添加红色样式类、disabled属性，否则渲染普通按钮

对应修正后的代码：

/* 放到你的样式文件中 */
.booked-btn {
  background: red;
  color: #fff;
  cursor: not-allowed;
}

const renderTableData = () => {
  let id = 1;
  return (
    <tr>
      {days.map((val) => (
        <td>
          {timeSlot.map((n, i) => {
            // 核心：判断当前遍历到的时间段n是否为已预约状态
            // 注意：slot.time === n是匹配规则，你需要根据自己freeSlotsList里存储的字段替换
            // 比如如果是按索引匹配就写 slot.index === i，按id匹配就写slot.id === xxx
            const isBooked = freeSlotsList.some(slot => slot.booked === 1 && slot.time === n);
            
            if (isBooked) {
              return (
                <button 
                  id={id++} 
                  className="booked-btn"
                  disabled
                >
                  {n} {id}
                </button> 
              )
            }
            return <button id={id++}>{n} {id}</button>
          })}
        </td>
      ))}
    </tr>
  )
};

注意：代码里的匹配规则slot.time === n需要和你实际的数据结构对齐，只要能把当前渲染的时间段和预约列表里的条目一一对应即可。

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