Блог

Я создал свою функцию reducer, импортировал ее в свой useShowSpell компонент и использую в useReducer, но я не уверен, что означает ошибка, когда говорится, что перегрузка не соответствует этому вызову. Вот изображение ошибки:

Вот код для моего useShowSpell компонента:

 import { useReducer, useEffect } from 'react';
import { apiGet } from '../utils';
import { reducer } from './reducers';

export const useShowSpell = (spellId: string) => {
  const [state, dispatch] = useReducer(reducer, {
    spell: null,
    isLoading: true,
    error: null,
  });

  useEffect(() => {
    let isMounted = true;

    apiGet(`spells/${spellId}`)
      .then((results) => {
        if (isMounted) {
          dispatch({ type: 'FETCH_SUCCESS', spell: results });
        }
      })
      .catch((err) => {
        if (isMounted) {
          dispatch({ type: 'FETCH_FAIL', error: err.message });
        }
      });

    return () => {
      isMounted = false;
    };
  }, [spellId]);

  return state;
};
 

И вот как reducer выглядит моя функция в настоящее время:

 type SpellState = {
  spell?: any;
  isLoading: boolean;
  error?: string;
};

type SpellAction =
  | { type: 'FETCH_SUCCESS'; spell: any }
  | { type: 'FETCH_FAILED'; error: string };

export const reducer = (prevState: SpellState, action: SpellAction) => {
  switch (action.type) {
    case 'FETCH_SUCCESS': {
      return { isLoading: false, error: null, spell: action.spell };
    }

    case 'FETCH_FAILED': {
      return { ...prevState, isLoading: false, error: action.error };
    }

    default:
      return prevState;
  }
};
 

Я также получаю вторичную ошибку dispatch({ type: 'FETCH_SUCCESS', spell: results }) в useShowSpell компоненте, где указано ожидаемое значение аргументов 0, но получил 1 и не совсем уверен, почему я также получаю эту ошибку при использовании useEffect .

Есть идеи о том, почему это может происходить? Спасибо!

1. error Свойство является необязательным, что означает, что оно должно быть undefined или string типа. Но вы присваиваете null error свойство в редукторе.

Изменить:

 case 'FETCH_SUCCESS': {
  return { isLoading: false, error: null, spell: action.spell };
}
 

Для:

 case 'FETCH_SUCCESS': {
  return { isLoading: false, spell: action.spell };
}
 

error Свойство в начальном состоянии, переданное useReducer должно быть undefined , НЕ null .

 const [state, dispatch] = useReducer(reducer, {
  spell: null,
  isLoading: true,
  error: undefined,
});
 

2. Тип действия FETCH_FAILED — НЕТ FETCH_FAIL . Поэтому вам следует изменить его на:

 dispatch({ type: 'FETCH_FAILED', error: err.message });
 

исходный код: https://github.com/mrdulin/jest-v26-codelab/tree/main/examples/65484084