React useReducer 清空 initialState
React useReducer empties initialState
我正在尝试在 initialState 中使用 axios 获取的一些数据,以便稍后将其与 useReducer 一起使用。但是一旦我将它作为我的第二个参数的 initialState 传递它 returns 一个没有对象的空数组。请帮忙...:(
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);
第一个和第二个日志的结果如下:
useReducer empties initialState
API 将计数添加到每个调用后的结果如下所示:
enter image description here
这里是我的减速器的代码,我检查了很多次但看起来不错:
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
仅在第一次渲染时(在 axios 完成之前)消耗 initialState
,在所有后续的重新渲染中,它只会 return 来自内存单元的状态。
你要做的是在顶部调用useReducer
const [countState, dispatch] = useReducer(counterReducer, {products: []});
然后在 getProds
中调用 dispatch
const getProds = () => {
axios.get(`API`).then((res) => {
const data = res.data;
setProds(data.products);
dispatch({ type: "PRODUCTS_FETCHED", payload: data.products});
});
};
并在你的 reducer 中添加相应的 case 来设置状态。
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;
}
};
我正在尝试在 initialState 中使用 axios 获取的一些数据,以便稍后将其与 useReducer 一起使用。但是一旦我将它作为我的第二个参数的 initialState 传递它 returns 一个没有对象的空数组。请帮忙...:(
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);
第一个和第二个日志的结果如下:
useReducer empties initialState
API 将计数添加到每个调用后的结果如下所示:
enter image description here
这里是我的减速器的代码,我检查了很多次但看起来不错:
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
仅在第一次渲染时(在 axios 完成之前)消耗 initialState
,在所有后续的重新渲染中,它只会 return 来自内存单元的状态。
你要做的是在顶部调用useReducer
const [countState, dispatch] = useReducer(counterReducer, {products: []});
然后在 getProds
dispatch
const getProds = () => {
axios.get(`API`).then((res) => {
const data = res.data;
setProds(data.products);
dispatch({ type: "PRODUCTS_FETCHED", payload: data.products});
});
};
并在你的 reducer 中添加相应的 case 来设置状态。
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;
}
};