javascript - react 如何有条件地使用 useMemo

Question

我仍然在思考 React hooks，并尝试根据不同的因素有条件地使用 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

Answer 1

为此，您需要在 useMemo Hook 中包含 if else 逻辑。然后您将要添加逻辑正在应用的变量作为依赖项。下面是一个简单的示例，其中第一个 header 在语言为 de 时发生更改。

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

  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]
  );