ウェブサイト検索

reactjs - 型 'unknown' にプロパティ 'x' は存在しません

うまく理解できていません。Stack OverflowやGitHubをくまなく調べたところ、試した解決策のひとつとしてジェネリックを追加してみましたが、useLocation<LocationState> の下で Expected 0 type arguments, but got 1. というエラーが出ています。以下が私のコードです。私が抱えている問題は、{searchvalue} に型を設定することですが、その型が不明ということです。どんな助けでも大変ありがたいです。

import React from "react";
import { useLocation } from "react-router-dom";

interface SearchResultsProps {}

interface LocationState {
    serachValue: string
}

export const SearchResults: React.FC<SearchResultsProps> = ({}) => {

    const location = useLocation<LocationState>();

     const {searchValue} = location.state
    

  return <div>Results Page</div>;

回答 #1

こちらは react-router-dom の useLocation フックのドキュメントへのリンクです: https://reactrouter.com/docs/en/v6/api#uselocation

それは関数のシグネチャを次のように定義します：

declare function useLocation(): Location;

interface Location extends Path {
  state: unknown;
  key: Key;
}

ご覧の通り、location.state は unknown 型です。したがって、履歴の状態にデータをプッシュしていて、それに型安全な方法でアクセスしたい場合は、状態にプッシュしたデータの型を次のようにアサートすることができます:

const location = useLocation();
const {serachValue} = location.state as LocationState;

こちらが完全な例です：

TS プレイグラウンド

import {default as React, type ReactElement} from 'react';
import {useLocation} from 'react-router-dom';

type EmptyObject = Record<never, never>;
type LocationState = { serachValue: string; };

function SearchResults (props: EmptyObject): ReactElement {
  const location = useLocation();
  const {serachValue} = location.state as LocationState;
//       ^^^^^^^^^^^
// is now type 'string'
  return (<div>Results Page</div>);
}

回答 #2

useLocation はジェネリック型ではありません。

export function useLocation(): Location {
  invariant(
    useInRouterContext(),
    // TODO: This error is probably because they somehow have 2 versions of the
    // router loaded. We can help them understand how to avoid that.
    `useLocation() may be used only in the context of a <Router> component.`
  );

  return React.useContext(LocationContext).location;
}

<LocationState> を削除して、戻り値を入力してください。

例：

const { state }: { state: LocationState } = useLocation();

関連記事