改进 React-Context 结构

Question

我刚开始学习 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 的数据 - 因此我为上下文提供了变量 value.

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

提前致谢！

亲切的问候，安德烈亚斯

Answer 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 基本上是您要更新的对象中值的键和值，并使用传播的旧对象返回新状态并通过提供的键分配新值。

改进 React-Context 结构

Improve React-Context structure

reactjs

react-context