map不是如何在react/typescript/redux中求解的函数

Question

我想使用typescript/areact/redux_thunk获取一个api数据，并使用该数据制作一个简单的应用程序

这是我的代码：

type.tsx: 
export interface Iproduct {
id: number;
title: string;
price: number;
description: string;
category: string;
image: string;
}

Actions.ts

import { Iproduct } from "../types/type";
export const getProduct = () => (dispatch: any) => {
axios
.get<Iproduct[]>("https://fakestoreapi.com/products")
.then((res) => dispatch({ type: "GET_PRODUCT", payload: res.data }))
.catch((err) => {
console.log(err);
});
};

减速器：

import { Iproduct } from "../types/type";
interface Iproducs {
products: any[];
}
const INITALIZE_STATE: Iproducs = {
products: [],
};
type Action = { type: string; payload: any[] };
export const reducer = (state = INITALIZE_STATE, action: Action) => {
switch (action.type) {
case "GET_PRODUCT":
return { ...state, products: action.payload };
default:
return state;
}
};

App.tsx:

const state = useSelector((state: Iproduct[]) => state);
const dispatch = useDispatch();
const [products, setproducts] = useState<Iproduct[]>([]);

useEffect(() => {
dispatch(getProduct());
}, []);

useEffect(() => {
setproducts(state);
products.forEach((e: Iproduct) => console.log(e));
});

我想在app.tsx文件中用useSelector映射我收到的数据，但我收到了一个错误

"TypeError:products.map不是一个函数">

如果你告诉我我在哪里做的，我会很高兴，因为我刚学会打字，所以我无法解决这些错误。

注意：我在项目中使用redux-thunk

Answer 1

尝试在reducer 中替换以下代码

export const reducer = (state = INITALIZE_STATE, action: Action) => {
switch (action.type) {
case "GET_PRODUCT":
return { ...state, products: [action.payload] };
default:
return state;
}
}; 

Answer 2

您可能发送了不同的代码，但我想我能理解。当第一次加载组件时，它是未定义的，因为您没有提出任何请求，产品数据也没有更改。解决这个问题的最简单方法是使用

state => (state.products || []).map(value => ...)