我是 React 的新手,正在尝试构建一个具有购物车功能的应用程序,用户可以在其中将机器人添加到购物车。我正在使用 Context API
在整个应用程序中提供购物车,并使用 useReducer
为状态提供服务。正在从服务器获取机器人并加载得很好。但我似乎无法找到一种方法来使用获取的产品设置 reducer
的初始状态。状态总是为机器人返回一个空数组。如何解决?
const CartProvider = ({ children }) => {
const [robots, setRobots] = useState([]);
useEffect(() => {
fetch('http://localhost:8000/api/robots')
.then(res => res.json())
.then(data => setRobots(data?.data))
}, [])
const initialState = {
robots: [...robots],
cart: []
}
const [state, dispatch] = useReducer(cartReducer, initialState);
return (
<CartContext.Provider value={{ state, dispatch }}>
{children}
</CartContext.Provider>
);
}
export default CartProvider;
最佳答案
由于初始状态值是异步获取的,因此您需要分派(dispatch)一个操作来设置 state
值。
例子:
const cartReducer = (state, action) => {
switch(action.type) {
... other reducer cases ...
case 'INITIALIZE_CART':
return action.payload;
default:
return state;
}
};
购物车 vendor
const initialState = {
robots: [],
cart: []
};
const CartProvider = ({ children }) => {
const [robots, setRobots] = useState([]);
const [state, dispatch] = useReducer(cartReducer, initialState);
useEffect(() => {
fetch('http://localhost:8000/api/robots')
.then(res => res.json())
.then(data => {
dispatch({
type: 'INITIALIZE_CART',
payload: {
...initialState,
robots: data?.data,
}
});
});
}, []);
return (
<CartContext.Provider value={{ state, dispatch }}>
{children}
</CartContext.Provider>
);
};
在应用程序初始化状态上也保存一些状态是很常见的。 UI 根据此状态值有条件地呈现。
例子:
const initialState = {
initialized: false,
robots: [],
cart: []
};
...
const cartReducer = (state, action) => {
switch(action.type) {
... other reducer cases ...
case 'INITIALIZE_CART':
return {
...action.payload,
initialized: true,
};
default:
return state;
}
};
关于javascript - 如何使用 API 响应设置 useReducer 初始状态?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70332680/