我正试图找到一种方法来更新我的“用户”状态,但我在这里已经停留了3天,我需要一些帮助。
下面是我的用户上下文:
import React, {useEffect, useState} from 'react';
export const UserContext = React.createContext({})
const UserProvider = UserContext.Provider;
const UserContextProvider = (props) => {
const [user, setUser] = useState({})
useEffect(() => {
fetch(`${API}/auth/user`, {
method: 'GET',
withCredentials: true,
credentials: 'include'
})
.then (response => response.json())
.then (response => {
setUser(response.user)
})
.catch (error => {
console.error (error);
});
}, [setUser])
console.log(user)
return (
<UserProvider value={{user, setUser}}>
{props.children}
</UserProvider>
)
}
export default UserContextProvider;
这里是我试图更新用户的地方。在我的例子中,我试图在user.cart数组中推送一个对象,因为后端的一切都很好,但在前端,状态不更新:
>
首先使用UserContext:
const Products=()=>{
const {user, setUser} = useContext(UserContext) ...
然后我试图更新用户状态,但当我单击该按钮时,它将我注销:
<button className="addTo--Cart--Button--Container">
<FaShoppingCart onClick={() => {addToCart(user._id, product); setUser(oldState => oldState.cart.push(product))}}/>
</button>
将我注销后,UserContextProvider函数中的console.log(user)
只记录user.cart更新的时间。
还有一个:
如何从上下文中删除项:
下面是我的删除功能:
const removeFromContextCart = (id) => {
console.log(id)
const updatedCart = user.cart.filter((item) => item.id !== id);
setUser(oldState => ({
...oldState,
cart: [
...oldState.cart,
updatedCart
]
}))
}
和我的按钮:
<button className="remove--Button" onClick={() => {removeFromCart(user._id, product); setUser(removeFromContextCart(product._id))}}> REMOVE</button>
尝试以以下方式更新用户状态
setUser(oldState => ({
...oldState,
cart: [
...oldState.cart,
product
]
}))