React中如何基于language参数条件化使用useMemo不触发hooks规则报错

错误原因 #

• 违反React Hook调用规则：Hook必须在组件最顶层调用，不能包裹在条件、循环、嵌套函数中，否则会导致渲染前后Hook调用顺序不一致，触发编译报错。
• columns变量被定义在if块的局部作用域中，块外部无法访问该变量，即使Hook调用合规也无法正常使用。

正确实现 #

把条件判断逻辑移动到useMemo的回调函数内部，同时把language添加到依赖数组中，这样只有language变化时才会重新计算表头配置，符合性能优化预期：

const columns = React.useMemo(() => {
  if (language === 'en') {
    return [
      {
        Header: "Name",
        accessor: "name",
        Cell: AvatarCell,
        emailAccessor: "email",
      },
      {
        Header: "Country",
        accessor: "country",
        Filter: SelectColumnFilter,
        filter: "equals",
        Cell: Country,
      },
      {
        Header: "Address",
        accessor: "address",
        Cell: Address,
      },
    ]
  }
  // 德语场景
  return [
    {
      Header: "Name",
      accessor: "name",
      Cell: AvatarCell,
      emailAccessor: "email",
    },
    {
      Header: "Land",
      accessor: "country",
      Filter: SelectColumnFilter,
      filter: "equals",
      Cell: Country,
    },
    {
      Header: "Adresse",
      accessor: "address",
      Cell: Address,
    },
  ]
}, [language])

优化方案（可选） #

如果后续需要支持更多语言，可以把表头文本抽成独立的多语言映射表，减少冗余代码，更便于维护：

// 多语言映射表，可单独抽为配置文件
const headerI18n = {
  en: {
    country: 'Country',
    address: 'Address'
  },
  de: {
    country: 'Land',
    address: 'Adresse'
  }
}

const columns = React.useMemo(() => {
  const t = headerI18n[language]
  return [
    {
      Header: "Name",
      accessor: "name",
      Cell: AvatarCell,
      emailAccessor: "email",
    },
    {
      Header: t.country,
      accessor: "country",
      Filter: SelectColumnFilter,
      filter: "equals",
      Cell: Country,
    },
    {
      Header: t.address,
      accessor: "address",
      Cell: Address,
    },
  ]
}, [language])

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