提问者:小点点

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


我正试图找到一种方法来更新我的“用户”状态,但我在这里已经停留了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>
    

  • 共1个答案

    匿名用户

    尝试以以下方式更新用户状态

    setUser(oldState => ({
      ...oldState,
      cart: [
        ...oldState.cart,
        product
      ]
    }))