如何使用 MERN 应用程序中的钩子更新上下文中的状态

编程问答 2022-05-03

问题描述

我需要一些帮助来更新 Context 中的状态，我想我需要一个回调函数，但我不确定如何在我的情况下更新我的用户状态。我正在尝试在 user.cart（数组）中推送一个元素。

注意：后端一切正常。

这是我的功能：

const {user,setUser} = useContext(UserContext)

useEffect(() => {
        
    },[user])
    

    const addToCart = (userId,product) => {
        console.log(user.cart,'1')
        fetch(`${API}/cart/usercart`,{
          method:"POST",headers: { 
            'Content-Type': 'application/json'
          },body: JSON.stringify([userId,product])
        })
        .then(() => {
            console.log('2')
            setUser(oldState => ({
                ...oldState,cart: [
                    ...oldState.cart,product
                ]
            }))
            console.log(user.cart,'3')
        })
        .catch(error => console.log(error))
    }

这是我的上下文：

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])

    return (
        <UserProvider value={{user,setUser}}>
            {props.children}
        </UserProvider>
    )
}   

export default UserContextProvider;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

expressexpressexpressmernmongodbmongodbreactjsreactjsreactjsreactjs