如何解决React-TypeScript-Redux-Toolkit:无法获取嵌套的api
我正在用打字稿练习redux-toolkit。我使用了一个open api,并且为了获取数据,我使用了Redux工具包的createAsyncThunk
。我成功获取了应用程序组件中的数据。当我进行控制台日志记录时,我可以看到数据,但是一旦映射data.result
,我就会收到错误消息:TypeError: Cannot read property 'map' of undefined
。我认为使用界面时出现Typescript错误。但是看不到问题出在哪里,而且在Chrome的reduxdevtools中:data
期望对象,但是我放置了数组。这是我的redux-devtools looks like。
我在Codesand Box中共享了代码。
PS: I am sharing only these two files below because I think this is where I making mistakes
这是我的减速器,我认为我在类型上犯了错误
import { createSlice,createAsyncThunk } from "@reduxjs/toolkit";
export const dataFetch = createAsyncThunk(
`store/dataFetch`,async () => {
const url = `https://rickandmortyapi.com/api/character`;
const response = await fetch(url);
const data = await response.json();
return data;
}
);
interface Meta {
loading: boolean;
error: boolean;
message: string;
}
// This is where I am making mistake
interface Results {
name: string;
image: string;
gender: string;
species: string;
status: string;
}
interface Info {
count: number;
pages: number;
}
interface User {
results: Results[];
info: Info;
}
export interface IUser {
meta: Meta;
data: User[];
}
const initialState: IUser = {
"meta": {
"loading": false,"error": false,"message": ``
},"data": []
};
const UserSlice = createSlice({
"name": `JsonPlacehoder user`,initialState,"reducers": {
},"extraReducers": (builder) => {
builder.addCase(dataFetch.pending,(state) => (
{
...state,"meta": {
...state.meta,"loading": true
}
}
));
builder.addCase(dataFetch.fulfilled,(state,{ payload }) => (
{
...state,"loading": false,"message": ``
},"data": payload
}
));
builder.addCase(dataFetch.rejected,{ error }) => {
window.alert(error?.message);
return {
...state,"meta": {
"loading": false,"error": true,"message": error?.message || ``
}
};
});
}
});
export default UserSlice.reducer;
这是我使用地图功能时遇到错误的组件
import React,{ useEffect } from 'react';
import { useSelector,useDispatch } from 'react-redux'
import { dataFetch } from './store/reducers';
import { IRootState } from './store/combineReducers';
function App() {
const { data,meta } = useSelector((rootState: IRootState) => rootState.fetchUser);
console.log(data);
const dispatch = useDispatch()
useEffect(() => {
dispatch(dataFetch())
},[dispatch])
return (
<div className="App">
{
data.results.map(i => { //GETTING ERROR
return <div>
<h1>{i.name}</h1>
</div>
})
}
</div>
);
}
export default App;
解决方法
这是因为您正在尝试.map
甚至还没有开始获取数据。
您的useEffect
在第一次渲染后触发。在此之前,您已经尝试过.map
次。
即使这样,在加载过程中,组件也可能会重新呈现。
加起来,您的某些化简趋向于实际上删除data
属性,而不是保留data: []
(我正在查看待处理项),导致在某些情况下data
未定义渲染。
TypeError
实际上不是TypeScript错误(这些错误始终以“ ts”开头,后跟数字),而是JavaScript运行时错误。因此,您这里确实发生了“运行时崩溃”。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。