我正在用打字稿练习redux-toolkit。我使用了一个开放的api,并且使用redux工具箱的来获取数据createAsyncThunk
。我成功获取了应用程序组件中的数据。当我控制台记录它时,我可以看到数据,但是一旦映射,就会data.result
出现错误:TypeError: Cannot read property 'map' of undefined
。我认为使用界面时出现Typescript错误。但是看不到问题出在哪里,而且在Chrome的reduxdevtools中也看不到:data
期望对象,但我放置了数组。我的redux-devtools看起来像。我在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,
"meta": {
...state.meta,
"loading": false,
"error": false,
"message": ``
},
"data": payload
}
));
builder.addCase(dataFetch.rejected, (state, { error }) => {
window.alert(error?.message);
return {
...state,
"meta": {
"loading": false,
"error": true,
"message": error?.message || ``
}
};
});
}
});
export default UserSlice.reducer;
这是我使用map函数时出现错误的组件
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
在某些渲染器上未定义。
ATypeError
实际上不是TypeScript错误(这些错误始终以“ ts”开头,后跟数字),而是JavaScript运行时错误。因此,您这里确实发生了“运行时崩溃”。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句