改进 React-Context 结构答案

【问题标题】：Improve React-Context structure改进 React-Context 结构
【发布时间】：2021-07-29 16:39:46
【问题描述】：

我刚开始学习 Reactjs，我正在寻找一些关于如何改进以下代码结构的提示和技巧（目前我只使用示例数据作为不同状态的值）：

import { useState, createContext } from "react"

export const UserContext = createContext()

export const UserProvider = ({ children }) => {
    const [uuid, setUuid] = useState("5498cdec-2bfb-455c-adc6-d59825adde71")
    const [email, setEmail] = useState("myEmail@email.com")
    const [username, setUsername] = useState("asdf1414")
    const [rank, setRank] = useState("ADMIN")
    const [profilePic, setProfilePic] = useState({ mime: "image/png", data: "" })
    const [joined, setJoined] = useState(Date.now())
    const [lastJoined, setLastJoined] = useState(Date.now())

    const value = {
        uuid: uuid,
        setUuid: setUuid,
        email: email,
        setEmail: setEmail,
        username: username,
        setUsername: setUsername,
        rank: rank,
        setRank: setRank,
        profilePic: profilePic,
        setProfilePic: setProfilePic,
        joined: joined,
        setJoined: setJoined,
        lastJoined: lastJoined,
        setLastJoined: setLastJoined
    }
    
    return (
        <UserContext.Provider value={value}>
            {children}
        </UserContext.Provider>
    )
}

我在这种情况下的目标如下：成功登录后，从数据库中获取所有数据并放入此上下文中。显然，我想使用和更新来自整个 webapp 的数据 - 因此我为 Context 提供了变量 value。

我目前的“眼中钉”是，value 变量非常拥挤，我必须手动输入所有数据和更新函数。有没有办法可以简化 value 变量？有没有关于如何做我想要实现的最佳实践？

提前致谢！

亲切的问候，安德烈亚斯

【问题讨论】：

您可以将整个用户信息保存在一个状态变量中，该变量是包含所有这些属性的对象。您还可以使用 useReducer 钩子，它可以让您管理更复杂的状态，或者您可以使用其中一种用于状态管理的无数工具，例如 Redux、Mobx 等。
感谢您为我“开球”，以不同的方式思考我的问题！我想出了一个办法让它更干净一些。

标签： reactjs react-context

【解决方案1】：

感谢您开始对我的问题进行不同的思考 - 我想出了一种改进代码结构的方法，如下所示：

import { useState, createContext } from "react"

export const UserContext = createContext()

export const UserProvider = ({ children }) => {
    const initValues = {
        uuid: "5498cdec-2bfb-455c-adc6-d59825adde71",
        email: "andreas.jokiel@hotmail.com",
        username: "asdf1414",
        rank: "ADMIN",
        profilePic: { mime: "image/png", data: "" },
        joined: Date.now(),
        last_joined: Date.now()
    }
    const [user, setUser] = useState(initValues)

    const changeUser = ([type, value]) => {
        setUser(prevValues => {
            return {...prevValues, [type]: value}
        })
    }

    const value = [user, changeUser]
    
    return (
        <UserContext.Provider value={value}>
            {children}
        </UserContext.Provider>
    )
}

上面的代码基本上使用 initValues 对象初始化用户状态，正如 Ron B 所建议的那样。为了改变状态中的值，函数 changeUser 接受 type 和 value 的数组基本上是您要更新的对象中的值的键和值，并使用传播的旧对象返回新状态，并通过提供的键分配新值。

【讨论】：