javascript - React useReducer 清空初始状态
问题描述
我正在尝试使用 axios 在 initialState 中获取的一些数据,以便稍后可以将其与 useReducer 一起使用。但是一旦我将它作为第二个参数的 initialState 传递,它就会返回一个没有对象的空数组。请帮忙... :(
const [prods, setProds] = useState([]);
const getProds = () => {
axios.get(`API`).then((res) => {
const data = res.data;
setProds(data.products);
});
};
const result = prods.map(function (el) {
const quantity = Object.assign({}, el);
quantity.count = 0;
return quantity;
});
const initialState = {
products: [result],
};
useEffect(() => {
getProds();
}, []);
console.log(initialState);
const [countState, dispatch] = useReducer(counterReducer, initialState);
console.log(countState);
第一个和第二个日志的结果如下所示:
将计数添加到每个后,API 调用的结果如下所示:
这是我的减速器的代码,我检查了很多次,但看起来还不错:
export const counterReducer = (state, action) => {
switch (action.type) {
case "increment":
return {
...state,
products: state.products.map((product) =>
product.id === action.id
? { ...product, count: product.count + 1 }
: product
),
};
case "decrement":
return {
...state,
products: state.products.map((product) =>
product.id === action.id
? {
...product,
count: product.count !== 1 ? product.count - 1 : 1,
}
: product
),
};
default:
return state;
}
};
解决方案
useReducer
仅在第一次渲染时消耗initialState
(在 axios 完成之前),在所有后续的重新渲染中,它只会从内存单元返回状态。你想要做的是useReducer
在顶部调用
const [countState, dispatch] = useReducer(counterReducer, {products: []});
然后打电话给dispatch
你getProds
const getProds = () => {
axios.get(`API`).then((res) => {
const data = res.data;
setProds(data.products);
dispatch({ type: "PRODUCTS_FETCHED", payload: data.products});
});
};
并在你的减速器中添加相应的案例来设置状态。
export const counterReducer = (state, action) => {
switch (action.type) {
case "increment":
return {
...state,
products: state.products.map((product) =>
product.id === action.id
? { ...product, count: product.count + 1 }
: product
),
};
case "decrement":
return {
...state,
products: state.products.map((product) =>
product.id === action.id
? {
...product,
count: product.count !== 1 ? product.count - 1 : 1,
}
: product
),
};
case "PRODUCTS_FETCHED":
return {
...state,
products: action.payload
};
default:
return state;
}
};
推荐阅读
- oracle - 在数据库列中随时间保存数据
- angular - 渲染在 Angular 模板中异步接收的文本
- r - 将第一次出现的字符串复制到数据框的列中
- r - R - 基于 (mB) 中的 P 值将一个矩阵 (mA) 映射到另一个 (mC)
- html - two images overlapping not correctly
- java - 从可运行 jar 保存到外部文本文件
- excel - 如何编写“不等于”条件,其中数字应被解释为文本?
- android - 如何在 Flutter 中将联系人与我的应用同步?
- collections - 需要以编程方式在 shopify 集合对象(目录)中添加自定义字段,如描述
- node.js - Angular 中的 API 身份验证