当前位置: 首页 > 知识库问答 >
问题:

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

松霖
2023-03-14

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

    赖俊
    2023-03-14

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

    setUser(oldState => ({
      ...oldState,
      cart: [
        ...oldState.cart,
        product
      ]
    }))
    
     类似资料:
    • 我如何编辑我的函数以从我的用户状态中删除项目?在user.cart中,它是数组。 函数如下: 下面是按钮:

    • 节目视图:截图 这是一个MERN项目: 我正在开发一个web应用程序,可以对公司模型进行用户CRUD操作。 我已经执行了Get-Add-Delete操作,但我对更新操作感到困惑。 我想使用我的CompanyModal(它是一个用于添加公司的引导模式)组件模式来编辑公司。 你能给点提示或建议做这件事吗?其实我脑子一片空白。

    • 我正在尝试将Google Maps添加到我的MERN Stack应用程序中。根据一些消息来源,我发现在create-react-app中添加.env文件并不能解决隐藏API_Keys(https://create-react-app.dev/docs/adding-custom-environment-variables/)的目的。如何将API_KEYS存储在后端(node.js)中并从React

    • 我需要帮助在类别上发布多个数据,当我在选择输入上选择多个数据并提交时,它会抛出错误。请参阅下面的错误 下面是模型模式。模型 这是我的路线文件。路线 当我在输入选择上选择多个时,这是我提交时的错误。 但当我只选择一个时,它就会通过。我只能保存一个在五月类别字段,我想保存多个在我的类别字段。

    • 我想通过猫鼬进行API调用,以将一批选定的(下面的模式)子文档的日期字段更新为当前日期。 Player模式: 我创建了一个复选框,用户可以在其中选择多个(以及他们的数组中的特定'卡片'子文档),并将所有选定的的特定卡片的日期更改为相同的日期...作为反应,我将相应的ObjectIds在主体中批处理在一起,并将选定的玩家/卡片组合发送到一个对象数组中,如下所示(其中数字表示相同的分组玩家 我正在发送

    • 下面是我MERN项目的文件结构。 客户端文件夹包含反应服务器。客户端在<code>localhost.Client上运行。comServer文件夹包含节点的代码。js服务器。服务器运行于 每当我从客户端向服务器发出请求时。如何缓解 csrf 攻击?确保向服务器发出的请求来自客户端,而不是来自任何其他源。