1

我仍然对 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
4

2 回答 2

3

为了做到这一点，你需要在 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]
  );
于 2021-08-10T20:43:53.303 回答
1

将逻辑放在 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]);
于 2021-08-10T20:44:28.193 回答