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 内部関数内に配置します。すべての言語に対して単一の関数を使用します。2 番目のパラメーター配列に追加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 に答える