Vyhledávání na webu

reactjs - Vlastnost 'x' neexistuje u typu 'unknown'

Tomu moc nerozumím. Prohledal jsem stackoverflow a github a jedno z řešení, které jsem zkoušel, bylo přidat generiku, ale dostávám tuto chybu Expected 0 type arguments, but got 1. u useLocation<LocationState>. Zde je můj kód níže. Problém, který mám, je nastavit typy pro {searchvalue}, ale jeho typ je neznámý. Jakákoli pomoc by byla velmi oceněna.

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

Odpověď č. 1

Zde je odkaz na dokumentaci pro hook useLocation z react-router-dom: https://reactrouter.com/docs/en/v6/api#uselocation

Definuje podpis funkce jako:

declare function useLocation(): Location;

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

Můžete vidět, že location.state je typu unknown, takže pokud jste do stavu historie vložili data a chcete k nim přistupovat bezpečně z hlediska typu, můžete typ dat, která jste do stavu vložili, přiřadit takto:

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

Zde je kompletní příklad:

TS hřiště

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

Odpověď č. 2

useLocation není genericky typizován.

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;
}

Odstraňte <LocationState> a zadejte návratovou hodnotu.

Příklad :

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

Související články