反應，Typescript，鈎子 - 從鈎子中解構數據，TS2339：類型上不存在屬性“數據”

Question

我從我自己在 React 中創建的 Hook 解構 Typescript 數據 object 時遇到問題。

export interface InitialState {
  pokemonListLoading: false;
  pokemonListLoadingFailed: false;
  data: [];
}

interface FetchPokemonList {
  type: typeof FETCH_POKEMON_LIST;
}

interface FetchPokemonListSuccess {
  type: typeof FETCH_POKEMON_LIST_SUCCESS;
  payload: PokemonList;
}

...

export type PokemonListActionTypes = FetchPokemonList | FetchPokemonListSuccess | FetchPokemonListError;

const dataFetchReducer = (state: InitialState, action: PokemonListActionTypes) => {
  switch (action.type) {
    case FETCH_POKEMON_LIST:
      return {
        ...state,
        pokemonListLoading: true,
        pokemonListLoadingFailed: false,
      };
    case FETCH_POKEMON_LIST_SUCCESS:
      return {
        ...state,
        pokemonListLoading: false,
        pokemonListLoadingFailed: false,
        data: action.payload,
      };
    case FETCH_POKEMON_LIST_ERROR:
      return {
        ...state,
        pokemonListLoading: false,
        pokemonListLoadingFailed: true,
      };
    default:
      throw new Error();
  }
};

export const fetchPokemonList = (initialUrl: string, initialData: []) => {
  const [url, setUrl] = useState(initialUrl);
  const [state, dispatch] = useReducer(dataFetchReducer, {
    pokemonListLoading: false,
    pokemonListLoadingFailed: false,
    data: initialData,
  });

  useEffect(() => {
    const fetchData = async () => {
      dispatch({ type: FETCH_POKEMON_LIST });
      try {
        const result = await axios(url);
        dispatch({ type: FETCH_POKEMON_LIST_SUCCESS, payload: result.data });
      } catch (error) {
        dispatch({ type: FETCH_POKEMON_LIST_ERROR });
      }
    };

    fetchData();
  }, [url]);

  return [state, setUrl];
};

和整個組件

import React, { FunctionComponent } from 'react';
import { fetchPokemonList, InitialState } from '../../hooks/fetchPokemonList';

const PokemonList: FunctionComponent = () => {
  const [{
      data: { results: pokemonList },
      pokemonListLoading,
      pokemonListLoadingFailed,
    },
  ] = fetchPokemonList('https://pokeapi.co/api/v2/pokemon',[]);

  return (
    <div>
      PokemonList
      {pokemonListLoading ? (
        <div>Laoding...</div>
      ) : (
      pokemonList && pokemonList.map((pokemon: { name: string}) => (
          <div key={pokemon.name}>{pokemon.name}</div>
        ))
      )}
      {pokemonListLoadingFailed && <div>Error</div>}
    </div>
  )
}

export { PokemonList }

Webstorm 顯示的錯誤代碼

TS2339：類型“{ pokemonListLoading: boolean; 上不存在屬性“數據”； pokemonListLoadingFailed：boolean； 數據： []; } | { pokemonListLoading: boolean; pokemonListLoadingFailed：boolean； 數據：口袋妖怪列表； } | 調度...>>'。

Answer 1

問題在於這一行：

dispatch({ type: FETCH_POKEMON_LIST_SUCCESS, payload: result.data });

在不使用新data值的鍵的情況下作為有效負載發送的位置。

然后在代碼部分中，您使用有效負載 object 設置data ，這會導致您遇到錯誤：

case FETCH_POKEMON_LIST_SUCCESS:
  return {
    ...state,
    pokemonListLoading: false,
    pokemonListLoadingFailed: false,
    data: action.payload,
  };

---

嘗試像這樣傳遞您的有效負載： payload: { data: result.data } 。
然后分別設置你的data ： data: action.payload.data