Question

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

很高兴有人能告诉我我错过了什么

Answer 1

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
}

其他方法是返回特定类型的对象而不是数组。您可以定义自定义类型：

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;

Answer 2

如果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];
};

Answer 3

或者只是将 as const 添加到自定义挂钩中的返回参数。

return [whatever, whatEver] as const

打字稿无法推断自定义钩子中的解构数组类型

3 个答案: