Question

我一直在这里查看有关stackoverflow的各种资源，但尚未发现任何东西可以解决我遇到的这个问题。我对打字稿有基本的了解，所以错误限制了我。

如果我将action: any留在我的减速器中，则错误消失了。但是，如果我用Action键入，则会出现过载错误。我对TS的技巧还不够聪明，无法弄清楚该怎么解决或解决它，它正在ReducerWithoutAction<any>上进行，但是我不知道应该如何解决。任何帮助将不胜感激。

在过渡期间，我将继续四处闲逛。

// state types
type MainWrapperType = {
  selection: number;
};

type Word = {
  word: string;
  translation: string;
  wordTranscription: string;
  partOfSpeech: string;
  description: string;
  example?: string;
};

type Notification = {
  format: string;
  message: string;
};

type Content = {
  lessonName: string;
  language: string;
  topics: string[];
  format: string;
  file: File;
};

type InitialState = {
  activeStep: number;
  notification: Notification;
  content: Content;
  newWords: Word[];
  initialTranscript: string;
  modifiedTranscript: string;
  transcriptSentences: string[];
};

const initialState = {
  activeStep: 0,
  notification: {
    format: "",
    message: "",
  },
  content: {
    lessonName: "",
    language: "",
    topics: [],
    format: "",
    file: "",
  },
  newWords: [],
  initialTranscript: "",
  modifiedTranscript: "",
  transcriptSentences: [],
};

// action types
interface SET_FILE {
  type: "SET_FILE";
  payload: File;
}

interface RESET_FILE {
  type: "RESET_FILE";
}

interface SET_INIT_TRANSCRIPT {
  type: "SET_INIT_TRANSCRIPT";
  payload: string;
}

interface SET_MODIFIED_TRANSCRIPT {
  type: "SET_MODIFIED_TRANSCRIPT";
  payload: string;
}

interface ADD_SENTENCE {
  type: "ADD_SENTENCE";
  payload: string;
}

interface SET_SENTENCE_TRANSLATIONS {
  type: "SET_SENTENCE_TRANSLATIONS";
  payload: string[];
}

interface ADD_NEW_WORD {
  type: "ADD_NEW_WORD";
  payload: Word;
}

interface UPDATE_WORD {
  type: "UPDATE_WORD";
  payload: Word;
}

interface INCREMENT_ACTIVE_STEP {
  type: "INCREMENT_ACTIVE_STEP";
}

interface DECREMENT_ACTIVE_STEP {
  type: "DECREMENT_ACTIVE_STEP";
}

interface RESET_ACTIVE_STEP {
  type: "RESET_ACTIVE_STEP";
}

interface RENDER_NOTIFICATION {
  type: "RENDER_NOTIFICATION";
  payload: Notification;
}

type Action =
  | SET_FILE
  | RESET_FILE
  | SET_INIT_TRANSCRIPT
  | SET_MODIFIED_TRANSCRIPT
  | ADD_SENTENCE
  | SET_SENTENCE_TRANSLATIONS
  | ADD_NEW_WORD
  | UPDATE_WORD
  | INCREMENT_ACTIVE_STEP
  | DECREMENT_ACTIVE_STEP
  | RESET_ACTIVE_STEP
  | RENDER_NOTIFICATION;

const reducer = (state: InitialState, action: Action) => {
  switch (action.type) {
    case "SET_FILE":
      return { ...state, content: action.payload };
    case "RESET_FILE":
      return { ...state, content: initialState.content };
    case "SET_INIT_TRANSCRIPT":
      return { ...state, initialTranscript: action.payload };
    case "SET_MODIFIED_TRANSCRIPT":
      return { ...state, modifiedTranscript: action.payload };
    case "ADD_SENTENCE":
      return {
        ...state,
        transcriptSentences: [...state.transcriptSentences, action.payload],
      };
    case "SET_SENTENCE_TRANSLATIONS":
      return {
        ...state,
        transcriptSentences: action.payload,
      };
    case "ADD_NEW_WORD":
      return {
        ...state,
        newWords: [...state.newWords, action.payload],
      };
    case "UPDATE_WORD":
      const newWordsClone = [...state.newWords];
      // console.log("nwc", newWordsClone);
      const seekWord = (wordObject: any) =>
        wordObject.word === action.payload.word;
      const wordIndex = newWordsClone.findIndex(seekWord);
      // console.log("wi", wordIndex, newWordsClone[wordIndex]);
      newWordsClone[wordIndex] = action.payload;
      return {
        ...state,
        newWords: newWordsClone,
      };
    case "INCREMENT_ACTIVE_STEP": {
      return { ...state, activeStep: state.activeStep + 1 };
    }
    case "DECREMENT_ACTIVE_STEP": {
      return { ...state, activeStep: state.activeStep - 1 };
    }
    case "RESET_ACTIVE_STEP": {
      return { ...state, activeStep: 0 };
    }
    case "RENDER_NOTIFICATION":
      return { ...state, notification: action.payload };
    default:
      throw new Error();
  }
};

const UploadPage = () => {
  const [state, dispatch] = useReducer(reducer, initialState); <-- Error
  ...
}

Answer 1

在您的initialState中，content.file设置为空字符串，但应改为File

type Content = {
  file: File;
  ...
};

type InitialState = {
  content: Content;
  ...
};


const initialState = {
  content: {
    file: "",
  },
  ...
};

您可以通过初始化具有相应类型的空对象来解决此问题

const EMPTY_FILE = Object.freeze(new File([""], "filename"));
const initialState = {
  content: {
    file: EMPTY_FILE,
  },
  ...
};

减速器中还有一个小错误

switch (action.type) {
  case "SET_FILE":
    return { ...state, content: action.payload };
  ...
}

应该是这个

switch (action.type) {
  case "SET_FILE":
    return { ...state, content: { ...state.content, file: action.payload } };
  ...
}

useReducer挂钩，如何对动作进行类型检查？

1 个答案: