React JSX如何按条件渲染不同元素 表格按钮渲染报错如何解决

报错原因 #

你贴的这段条件渲染代码本身逻辑没有问题，不会直接触发最大更新深度超限的报错，问题大概率出在组件的其他逻辑：

• 按钮的事件绑定写错：如果你的按钮上绑定了onClick等事件，写成了onClick={setStateFunc()}这种形式，会在渲染阶段直接执行状态更新，触发组件重渲染，反复循环就会触发这个报错，正确写法应该是onClick={() => setStateFunc()}。
• assessment对象引用不稳定：如果父组件每次渲染都会生成新的assessment对象（比如每次渲染都重新声明对象字面量赋值），会导致当前组件反复触发重渲染，嵌套层级多了就会触发更新超限。
• 副作用钩子依赖错误：如果组件内的useEffect、useMemo等钩子的依赖项配置错误，会导致反复执行回调触发状态更新，形成无限循环。

正确实现条件渲染的方案 #

你当前的多条件&&判断写法逻辑是通顺的，但是可以优化为更易维护的对象映射写法，避免重复的判断逻辑：

// 枚举配置可以定义在组件外部，避免每次渲染重复生成
const STATUS_BUTTON_MAP = {
  'Complete': {
    className: 'btn btn-success',
    label: 'Complete'
  },
  'Not Complete': {
    className: 'btn btn-info',
    label: 'Not Completed'
  },
  'In Progress': {
    className: 'btn btn-warning',
    label: 'WIP'
  },
  'Rejected': {
    className: 'btn btn-danger',
    label: 'Rejected'
  }
}

// 渲染逻辑
<td>
  {STATUS_BUTTON_MAP[assessment.categoryCategory] && (
    <button
      type="button"
      className={STATUS_BUTTON_MAP[assessment.categoryCategory].className}
    >
      {STATUS_BUTTON_MAP[assessment.categoryCategory].label}
    </button>
  )}
</td>

如果需要临时验证是不是这段代码的问题，可以先把所有按钮的逻辑注释掉，看报错是否消失，再逐步排查关联的状态更新逻辑即可。

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