ReactJs中map函数内条件渲染不生效及状态访问异常问题

核心问题原因 #

• 条件渲染语法报错：你当前timeSlot.map使用的是箭头函数简写返回语法(n, i) => (<JSX节点>)，圆括号包裹的JSX上下文仅支持写入表达式，if属于流程控制语句，无法直接在表达式位置执行，因此直接写if判断会触发语法错误，该场景不需要额外嵌套特殊HTML标签，调整JS写法即可。
• freeSlotsList"访问异常"是React异步状态更新的正常表现：useEffect中的Axios请求是异步执行的，组件首次渲染时freeSlotsList是初始值空数组，等接口返回、setFreeSlotsList调用后才会触发组件重渲染，此时才能拿到接口返回的真实数据，只要状态定义在组件函数作用域内，renderTableData通过闭包即可正常访问该状态，不存在作用域访问问题。
• 隐藏的逻辑错位bug：你在renderTableData内定义let id = 1、遍历时用后置自增id++生成id的写法存在问题：一是每次组件重渲染id都会重置为1，二是后置自增会先返回当前值再执行自增，判断逻辑里拿到的id和按钮上绑定的id永远差1，直接导致判断结果完全不符合预期。

正确实现写法 #

把map回调改成花括号包裹的语句块形式，就可以正常写if判断，同时用遍历索引稳定计算每个按钮的id，避免自增变量带来的错位问题：

const renderTableData = () => { 
  // 可选优化：接口数据没加载完可以先返回加载提示
  if (freeSlotsList.length === 0) return <tr><td>加载中...</td></tr>

  const activeButton = () => { 
    // 补充你的按钮激活样式逻辑
  }

  return (
    <tr>
      {days.map((val, dayIndex) => (
        <td key={dayIndex}>
             {timeSlot.map((n, slotIndex) => {
                // 用双层遍历的索引稳定计算id，避免自增变量的错位问题
                const currentId = dayIndex * timeSlot.length + slotIndex + 1;
                // 语句块内可以正常写if判断
                if(freeSlotsList.includes(currentId)){
                  return <h1 key={slotIndex}>Testing</h1>
                }
                return (
                  <button 
                    key={slotIndex}
                    id={currentId} 
                    // 注意：activeButton是函数，要执行后拿返回值才会生效，不要直接传函数引用
                    className={activeButton()}
                  > 
                    {n} {currentId}
                  </button> 
                )
             })}
        </td>
      ))}
    </tr>
  );
};

额外注意点 #

• 如果接口返回的freeSlotsList里存储的id是字符串类型，需要先做类型转换再判断，比如freeSlotsList.includes(String(currentId))，否则数字和字符串类型不匹配会导致includes判断失效。
• 遍历生成的JSX节点一定要加key属性，用稳定的索引或者业务唯一id即可，避免React渲染diff异常。
• 简单的二选一场景也可以不用if语句，直接在JSX里用三元表达式实现，比如{freeSlotsList.includes(currentId) ? <h1>Testing</h1> : <button>...</button>}。

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