createContext、useContext 返回未定义

Question

当我 console.log(user) 它返回 undefined 时的代码应该返回这个... [{ id: 1, name: 'username' }] 。

我不知道是什么导致它这样做，如果您有任何想法，请告诉我我能做的任何事情，也许 useContext 有更新，如果有，请通知我。 提前致谢！！

 import {createContext, useState} from 'react' const UsersContext = createContext() export const UsersProvider = ({children}) => { const {user, setUser} = useState([{ id: 1, name: 'username' }]) return <UsersContext.Provider value={ {user} }>{children}</UsersContext.Provider> } export default UsersContext // The next File... import UserItem from "./UserItem" import {useContext} from 'react' import UsersContext from "../context/UserContext" function userList({handleDelete}) { const {user} = useContext(UserContext) return ( <div> {console.log(user)} </div> ) } export default UserList

代码结束...

Answer 1

import {createContext, useState} from 'react'
const UsersContext = createContext(null)

export const UsersProvider = ({children}) => {
    // useState returns an array not object
    // if you want to store one user, use an object
    const [user, setUser] = useState({id: 1,name: 'username'})
    // if you want to store mutiple users
    const [user, setUser] = useState([{id: 1,name: 'username'}])

    return <UsersContext.Provider value={{user}}>
            {children}
           </UsersContext.Provider>
}

export default UsersContext



// The next File...

import UserItem from "./UserItem"
import {useContext} from 'react'
import UsersContext from "../context/UserContext"

function userList({handleDelete}) {
  const { user } = useContext(UserContext)

  return (
    <div>
        // if you used an object
        {user?.username}
        // for array of objects
        {user && user.map((user, i) => (<p key={i}>{user.username}</p>))}
    </div>
  )
}


export default UserList

Answer 2

您要检查的第一件事是，确保 UserList 组件使用 UserProvider 包装