我收到以下错误:
(属性)英雄:减速机 没有重载匹配此调用。 重载3之1,'((reducers:ReducersMapObject):Reducer,AnyAction>')出现以下错误。
类型'(状态:字符串|未定义,操作:操作)=>字符串|英雄”不能分配给“减速器”类型。 参数“状态”和“状态”的类型不兼容。 输入“英雄| undefined'不能分配给'string |未定义”。
类型“ Hero”不可分配给类型“ string” .ts(2769) index.ts(7,3):期望的类型来自属性“ hero”,该属性在此处声明为“ ReducersMapObject”类型
它出现在下面用index.ts编写的“英雄”上,其两侧都有3个星号。
reducers / index.ts:
import { combineReducers } from "redux";
import { heroesReducer, heroReducer } from "./reducer";
import { Hero } from "../actions";
export interface StoreState {
heroes: Hero[];
hero: Hero;
}
export const reducers = combineReducers<StoreState>({
heroes: heroesReducer,
***hero***: heroReducer
});
reducers / reducers.ts
import { Hero, Action, ActionTypes } from "../actions";
export const heroesReducer = (state: Hero[] = [], action: Action) => {
switch (action.type) {
case ActionTypes.fetchAllHeroes:
return action.payload;
default:
return state;
}
};
export const heroReducer = (state: Hero, action: Action) => {
switch (action.type) {
case ActionTypes.fetchSingleHero:
return action.payload;
default:
return state;
}
};
actions / types.ts
import { FetchAllHeroesAction, FetchSingleHeroAction } from "./heroes";
export enum ActionTypes {
fetchAllHeroes,
fetchSingleHero,
searchHero
}
export type Action = FetchAllHeroesAction | FetchSingleHeroAction;
components / HeroItem:
import React from "react";
import { StoreState } from "../reducers";
import { connect } from "react-redux";
import { Hero, fetchSingleHero } from "../actions";
interface HeroProps {
id: string;
hero: Hero;
}
export const _HeroItem: React.FC<HeroProps> = props => {
console.log(props);
return <div>{props.hero}hihihihi</div>;
};
const mapStateToProps = (state: StoreState): { hero: Hero } => {
return { hero: state.hero };
};
export const HeroItem = connect(mapStateToProps, { fetchSingleHero })(
_HeroItem
);
actions / heroes.ts:
import axios from "axios";
import { Dispatch } from "redux";
import { ActionTypes } from "./types";
export interface Hero {
id: string;
name: string;
powerstats: {
strength: string;
speed: string;
intelligence: string;
durability: string;
power: string;
combat: string;
};
biography: {
fullName: string;
alterEgos: string;
aliases: string[];
placeOfBirth: string;
publisher: string;
alignment: string;
};
appearance: {
gender: string;
race: string;
height: string[];
weight: string[];
};
work: {
occupation: string;
base: string;
};
connections: {
groupAffiliation: string;
relatives: string;
};
image: {
url: string;
};
}
export interface FetchSingleHeroAction {
type: ActionTypes.fetchSingleHero;
payload: Hero;
}
export interface HeroId {
id: string;
}
export const fetchSingleHero = (heroId: HeroId) => {
const url = `https://superheroapi.com/api/2987607971258652/${heroId}`;
return async (dispatch: Dispatch) => {
const res = await axios.get(corsProxy + url);
console.log(res.data);
dispatch<FetchSingleHeroAction>({
type: ActionTypes.fetchSingleHero,
payload: res.data
});
};
};
昨晚我让它可以执行“ FetchAllHeroes”操作,但是通过删除属性检查打字稿组件的一部分来做到这一点,我认为这不是最好的方法。如果有人对如何解决它有任何想法或想要任何其他信息来帮助它,将不胜感激。我是Typescript的新手。
谢谢!