машинописный текст не смог определить тип массива в пользовательском хуке - PullRequest
Новая
       21

машинописный текст не смог определить тип массива в пользовательском хуке

0 голосов
/ 23 марта 2020 
import * as React from "react";
import axios from "axios";
import {Fragment, useState, useEffect} from "react";
interface Ihits {
  objectID: string;
  url: string;
  title: string;
}

interface IinitialData<T> {
  hits: Array<T>
}

const useDataApi = (initialUrl:string, initialData: IinitialData<Ihits>) => {
  const [data, setData] = useState(initialData);
  const [url, setUrl] = useState(initialUrl);
  const [isLoading, setIsLoading] = useState(false);
  const [isError, setIsError] = useState(false);
  useEffect(() => {
    const fetchData = async () => {
      setIsError(false);
      setIsLoading(true);
      try {
        const result = await axios(url);
        setData(result.data);
      } catch (error) {
        setIsError(true);
      }
      setIsLoading(false);
    };
    fetchData();
  }, [url]);
  // return [{ data, isLoading, isError }, setUrl];
  return [{data, isLoading, isError }, setUrl];
};

const UseDataFetch: React.FC = () => {
  const [query, setQuery] = useState('redux');
  **const [{data, isLoading, isError}, setUrl] = useDataApi(**
    'https://hn.algolia.com/api/v1/search?query=redux',
    { hits: [] },
  );
  return (
    <Fragment>
      <form
        onSubmit={event => {
          **setUrl(**
            `http://hn.algolia.com/api/v1/search?query=${query}`,
          );
          event.preventDefault();
        }}
      >
        <input
          type="text"
          value={query}
          onChange={event => setQuery(event.target.value)}
        />
        <button type="submit">Search</button>
      </form>
      {isError && <div>Something went wrong ...</div>}
      {isLoading ? (
        <div>Loading ...</div>
      ) : (
        <ul>
          {data.hits.map((item: Ihits) => (
            <li key={item.objectID}>
              <a href={item.url}>{item.title}</a>
            </li>
          ))}
        </ul>
      )}
    </Fragment>
  );
}
export default UseDataFetch;

Я изучил этот пример, который связал https://www.robinwieruch.de/react-hooks-fetch-data

Я попробовал различные способы решения, но не смог установить типизированное значение разрушения вообще. за исключением использования любого типа и возврата объекта, например (например: return {data, isLoading, isError, setUrl};)

, будет благодарен, что кто-то может сказать, что я пропустил

Ответы [ 2 ]

1 голос
/ 23 марта 2020

Typescript не может вывести его, потому что вы возвращаете массив, где каждый элемент имеет другой тип. С точки зрения Typescript, он не может связать их без явного его ввода. 

return [{data, isLoading, isError}, setUrl];

Первый подход заключается в том, что вы явно определяете тип возвращаемого значения useDataApi метода: 

const useDataApi = (initialUrl:string, initialData: IinitialData<Ihits>): 
[{data: IinitialData; isLoading: boolean; isError: boolean}, string] => {
// your code here
}

Другой подход заключается в том, что вы возвращаете объект указанного c типа вместо массив. Вы можете определить пользовательский тип: 

type DataApiResponse = {
  response: {
    data: IinitialData<Ihits>;
    isLoading: boolean;
    isError: boolean;
  };
  setUrl: Dispatch<SetStateAction<string>>;
}

, а затем использовать его как: 

return {response: {data, isLoading, isError}, setUrl} as DataApiResponse;

Наконец внести изменения в UseDataFetch метод: 

const {response, setUrl} = useDataApi(
  "https://hn.algolia.com/api/v1/search?query=redux",
  { hits: [] }
);

const {data, isError, isLoading} = response;
0 голосов
/ 23 марта 2020

Если TypeScript не может вывести его, то вы можете просто явно объявить тип возвращаемого значения функции самостоятельно: 

// Note return type added after ':'
const useDataApi = (initialUrl:string, initialData: IinitialData<Ihits>): [{data: IinitialData; isLoading: boolean; isError: boolean}, string] => {
  const [data, setData] = useState(initialData);
  const [url, setUrl] = useState(initialUrl);
  const [isLoading, setIsLoading] = useState(false);
  const [isError, setIsError] = useState(false);
  useEffect(() => {
    const fetchData = async () => {
      setIsError(false);
      setIsLoading(true);
      try {
        const result = await axios(url);
        setData(result.data);
      } catch (error) {
        setIsError(true);
      }
      setIsLoading(false);
    };
    fetchData();
  }, [url]);
  // return [{ data, isLoading, isError }, setUrl];
  return [{data, isLoading, isError }, setUrl];
};
...