reactjs - TypeError:无法读取未定义的属性“类别”
问题描述
我试图解决这个问题 2 天,但直到现在我还没有得到解决方案,任何人都可以帮助我,在控制台中成功渲染类别和 redux 正常使用数据但没有在屏幕上渲染
类别屏幕
const category = useSelector(state => state.category);
const dispatch = useDispatch();
useEffect(() => {
dispatch(getCategory());
}, [dispatch]);
const renderCategories = (categories) => {
let myCategories = [];
for (let category of categories) {
myCategories.push(
<li key={category.name}>
{category.name}
{/* {category.children.length > 0 ? (<ul>{renderCategories(category.children)}</ul>) : null} */}
</li>
);
}
return myCategories;
}
这部分的返回(问题在这里(无法读取未定义的属性“类别”)
<Col md={12}>
<ul>
{renderCategories(category.categories)}
</ul>
</Col>
减速器
const initState = {
categories: [],
loading: false,
error: null
};
export const getCategoryReducer = (state = initState, action) => {
switch (action.type) {
case GET_CATEGORY_SUCCESS:
return { ...state, categories: action.payload.categories };
default:
return state;
}
};
获取行动
export const getCategory = () => {
return async dispatch => {
dispatch({ type: GET_CATEGORY_REQUEST })
const res = await axios.get(`api/category/getcategory`);
console.log(res);
if (res.status === 200) {
const { categories } = res.data;
dispatch({ type: GET_CATEGORY_SUCCESS, payload: { categories: categories } })
} else {
dispatch({ type: GET_CATEGORY_FAIL, payload: { error: res.data.error } })
}
}
}
店铺
import { createStore, compose, applyMiddleware, combineReducers } from 'redux';
import thunk from 'redux-thunk';
import { getCategoryReducer } from './reducers/categoryReducers';
import {
userDeleteReducer,
userDetailsReducer,
userListReducer,
userRegisterReducer,
userSigninReducer,
userUpdeteProfileReducer,
userUpdeteReducer,
} from './reducers/userReducers';
const initialState = {
userSignin: {
userInfo: localStorage.getItem('userInfo')
? JSON.parse(localStorage.getItem('userInfo'))
: null,
},
};
const reducer = combineReducers({
userSignin: userSigninReducer,
userRegister: userRegisterReducer,
userDetails: userDetailsReducer,
userUpdateProfile: userUpdeteProfileReducer,
userUpdate: userUpdeteReducer,
userList: userListReducer,
userDelete: userDeleteReducer,
getCategory: getCategoryReducer,
});
const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
reducer,
initialState,
composeEnhancer(applyMiddleware(thunk))
);
export default store;
后端路由器
categoryRouter.get(
'/getcategory',
(req, res) => {
Category.find({}).exec((error, categories) => {
if (error) return res.status(400).json({ error });
if (categories) {
res.status(200).json({ categories });
}
});
});
export default categoryRouter;
类别模型
import mongoose from 'mongoose';
const categorySchema = new mongoose.Schema(
{
name: { type: String, required: true, trim: true },
slug: { type: String, required: true, unique: true },
parentId: { type: String }
}, { timestamps: true }
);
const Category = mongoose.model('Category', categorySchema);
export default Category;
解决方案
category
在状态完全填充之前可以未定义。所以你可以这样尝试:
{renderCategories(category?.categories)}
推荐阅读
- docker - Azure 管道:多次下载 docker 映像
- python - 在 Django 的管理网站中列出所有订单
- javascript - 调用另一个函数获取返回值后函数返回undefined
- graph-databases - FDB 客户端无法在 macOS Catalina (v10.15.6) 上启动
- c# - 如何调用从另一个脚本检查枚举值的方法?
- mongodb - 甚至无法连接到 Mongodb Atlas 使用UnifiedTopology: true,
- java - 使用 FirebaseDatabase 中的数据填充 Fragment 中的 RecyclerView
- javascript - 将新的键:值对“推送”到 JavaScript 对象上
- processing - 在处理 3 中的设备之间切换会改变事物的外观
- angular - Angular如何将参数传递给注入的服务