反应如何有条件地使用 useMemo答案

【问题标题】：React how can I use useMemo conditionally反应如何有条件地使用 useMemo
【发布时间】：2021-08-11 04:44:28
【问题描述】：

我仍在研究 React 钩子，并尝试根据不同的因素有条件地使用 useMemo。

我的 useMemo 部分看起来像这样

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

但是，我想根据选择的语言更改 headers，因此我尝试使用 `if 语句，但这不起作用



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

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

but it fails to compile and I get a message saying that I called the react hook conditionally.

How can I use one or the other useMemo based on the value of `language`

Thanks in advance

【问题讨论】：

标签： javascript reactjs react-hooks react-usememo

【解决方案1】：

为了做到这一点，你需要在 useMemo 钩子中包含 if else 逻辑。然后，您将希望将应用逻辑的变量添加为依赖项。下面是一个简单的例子，当语言是 de 时，第一个标题被改变。

您传递给 useMemo 挂钩的只是一个函数，这意味着您可以在其中包含非常复杂的逻辑。您无需将自己限制为仅返回一些常量和预定义变量

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

【讨论】：

【解决方案2】：

将逻辑放在 useMemo 内部函数中 - 对所有语言使用一个函数。将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,
      },
    ];
  } else if (language === 'de') {
    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]);

【讨论】：