减速器返回两次，第二次返回未定义

Question

我正在编写代码来获取类别，而无需在添加类别后立即刷新。但是在编写代码之后，它说"；类别不可迭代">

--------------------------------categories.action.js代码------------------------------

import axios from "../helper/axios";
import { categoryConstants } from "./constants";
export const getAllCategory = () => {
return async (dispatch) => {
dispatch({ type: categoryConstants.GET_CATEGORY_REQUEST });
const res = await axios.get("/category/getCategory");
if (res.status === 200) {
const { categoryList } = res.data;
dispatch({
type: categoryConstants.GET_CATEGORY_SUCCESS,
payload: { categoryList: categoryList },
});
} else {
dispatch({
type: categoryConstants.GET_CATEGORY_FAILURE,
payload: {
error: res.data.error,
},
});
}
};
};
export const addNewCategory = (form) => {
return async (dispatch) => {
dispatch({ type: categoryConstants.ADD_CATEGORY_REQUEST });
const res = await axios.post("/category/create", form);
if (res.status === 201) {
dispatch({
type: categoryConstants.ADD_CATEGORY_SUCCESS,
payload: { category: res.data.category },
});
} else {
dispatch({
type: categoryConstants.ADD_CATEGORY_FAILURE,
error: res.data.error,
});
}
};
};

----------------------------------categories.reducer.js---------------------------------------

import { categoryConstants } from "../actions/constants";
const initState = {
categories: [],
loading: false,
error: null,
};
const getNewCategory = (parentId, categories, category) => {
let myCategory = [];
console.log("Within", categories);
console.log("Within 2", categories);
for (let cat of categories) {
console.log("Outside", categories);
if (cat._id == parentId) {
myCategory.push({
...cat,
children:
cat.children && cat.children.length > 0
? getNewCategory(
parentId,
[
...cat.categories,
{
id: category._id,
name: category.name,
slug: category.slug,
parendId: category.parentId,
children: category.children,
},
],
category
)
: [],
});
} else {
myCategory.push({
...cat,
children:
cat.children && cat.children.length > 0
? getNewCategory(parentId, cat.category, category)
: [],
});
}
}
return myCategory;
};
// eslint-disable-next-line import/no-anonymous-default-export
export default (state = initState, action) => {
// eslint-disable-next-line default-case
switch (action.type) {
case categoryConstants.GET_CATEGORY_SUCCESS:
state = {
...state,
categories: action.payload.categoryList,
};
break;
// eslint-disable-next-line no-duplicate-case
case categoryConstants.ADD_CATEGORY_REQUEST:
state = {
...state,
loading: true,
};
break;
// eslint-disable-next-line no-duplicate-case
case categoryConstants.ADD_CATEGORY_SUCCESS:
const category = action.payload.category;
const updatedCategories = getNewCategory(
category.parentId,
state.categories,
category
);
console.log("categories", state.categories);
console.log("Updated", updatedCategories);
state = {
...state,
loading: false,
categories: updatedCategories,
};
break;
// eslint-disable-next-line no-duplicate-case
case categoryConstants.ADD_CATEGORY_FAILURE:
state = {
...initState,
loading: false,
error: action.error,
};
break;
}
return state;
};

--------------------------------------------index.js---------------------------------------------

import { useEffect, useState } from "react";
import { useSelector, useDispatch } from "react-redux";
import { addNewCategory, getAllCategory } from "../../actions";
import Layout from "../../components/Layout";
import Popup from "../../components/Popup";
const Categories = (props) => {
const [categoryName, setcategoryName] = useState("");
const [parentId, setparentId] = useState("");
const [categoryImage, setcategoryImage] = useState("");
const category = useSelector((state) => state.category);
const dispatch = useDispatch();
useEffect(() => {
dispatch(getAllCategory());
}, []);
const getCategory = (categories) => {
let allCategories = [];
for (let category of categories) {
allCategories.push(
<li key={category.name}>
{category.name}
{category.children.length > 0 ? (
<ul>{getCategory(category.children)}</ul>
) : null}
</li>
);
}
return allCategories;
};
const getCategoryList = (categories, options = []) => {
for (let category of categories) {
options.push({
value: category._id,
label: category.name,
});
if (category.children.length > 0) {
getCategoryList(category.children, options);
}
}
return options;
};
const [isOpen, setIsOpen] = useState(false);
const togglePopup = () => {
setIsOpen(!isOpen);
};
const handleCategoryImage = (e) => {
setcategoryImage(e.target.files[0]);
};
const sendData = () => {
const form = new FormData();
form.append("name", categoryName);
form.append("parentId", parentId);
form.append("categoryImage", categoryImage);
dispatch(addNewCategory(form));
togglePopup();
};
return (
<Layout sidebar>
<div className="main-content">
<h1>Category</h1>
<input
style={{
width: "fit-content",
cursor: "pointer",
backgroundColor: "#24a0ed",
border: "1px solid #24a0ed",
color: "#fff",
}}
type="button"
value="Add Category"
onClick={togglePopup}
/>
</div>
<ul>{getCategory(category.categories)}</ul>
{isOpen && (
<Popup
content={
<>
<input
type="text"
placeholder="Category Name"
value={categoryName}
onChange={(e) => {
setcategoryName(e.target.value);
}}
/>
<select
value={parentId}
onChange={(e) => {
setparentId(e.target.value);
}}
>
<option>Select Category</option>
{getCategoryList(category.categories).map((item) => (
<option key={item.value} value={item.value}>
{item.label}
</option>
))}
</select>
<input
type="file"
name="categoryImage"
onChange={handleCategoryImage}
/>
<input
type="submit"
value="Save Changes"
className="save-changes"
onClick={sendData}
/>
</>
}
handleClose={togglePopup}
/>
)}
</Layout>
);
};
export default Categories;

------------------------------------------store.js---------------------------------------------

import { applyMiddleware, createStore } from "redux";
import thunk from "redux-thunk";
import rootReducer from "../reducers";
const store = createStore(rootReducer, applyMiddleware(thunk));
export default store;

它显示以下错误

Answer 1

我找到了答案。在函数"中；getNewCategory(("第二个参数"；[…类别]"；必须用"；[…猫.孩子]"；。这是因为cat不包含类别，而是包含子类。

if (cat._id == parentId) {
myCategory.push({
...cat,
children:
cat.children && cat.children.length > 0
? getNewCategory(
parentId,
[
...cat.categories,
{
id: category._id,
name: category.name,
slug: category.slug,
parendId: category.parentId,
children: category.children,
},
],
category
)
: [],
});
}