反应，无法在上下文中消耗价值，获得undurefther typeError：无法读取未定义的属性

Question

我的主页什么都没有渲染。我已经检查了home.js，我找不到问题。在控制台中，这是我遇到的错误：

Home.js:13 Uncaught TypeError: Cannot read properties of undefined (reading 'name')

app.js：

import React, { useState } from 'react'
import Navigation from './Navigation'
import ThemeContext from './ThemeContext'
import UserContext from './UserContext'
import Home from './Home'

function App() {
  let [theme, setTheme] = useState({
    variant: 'dark',
    toggleTheme: toggleTheme
  })

  let [user, setUser] = useState({
    name: "Alyssa"
  })

  function toggleTheme() {
    setTheme(theme => (
      {
        ...theme,
        variant: theme.variant === 'dark' ? 'light' : 'dark',
      }
    ))
  }

return (
  <>
  <ThemeContext.Provider value={theme}>
    <Navigation />
  </ThemeContext.Provider>
  <ThemeContext.Provider value={theme}>
    <Home />
  </ThemeContext.Provider>
  
  </>
)
}
export default App

home.js：

import Card from 'react-bootstrap/Card'
import Button from 'react-bootstrap/Button'
import Alert from 'react-bootstrap/Alert'
import UserContext from './UserContext'
import { useContext } from 'react'

function Home() {
  let user = useContext(UserContext)

  return (
    <>
    <UserContext.Consumer>
      <Alert variant="success">Welcome back, {user.name}!</Alert>
      <Card className="text-center col-md-10 mx-auto my-3">
        <Card.Header>Featured</Card.Header>
        <Card.Body>
          <Card.Title>This is Our Featured Item</Card.Title>
          <Card.Text>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </Card.Text>
          <Button variant="primary">Click Here</Button>
        </Card.Body>
      </Card>
    </UserContext.Consumer>
    </>
  )
}

export default Home

Answer 1

您没有通过用户被儿童组件消费的用户。您需要使用USERCONTEXT.ROVIDER包装主页，并通过您想要提供的用户。另外，您可以在主页上删除usercontext.consumer标签，因为您正在使用挂钩方法从上下文中消费。

import React, { useState } from 'react'
import Navigation from './Navigation'
import ThemeContext from './ThemeContext'
import UserContext from './UserContext'
import Home from './Home'

function App() {
  let [theme, setTheme] = useState({
    variant: 'dark',
    toggleTheme: toggleTheme
  })

  let [user, setUser] = useState({
    name: "Alyssa"
  })

  function toggleTheme() {
    setTheme(theme => (
      {
        ...theme,
        variant: theme.variant === 'dark' ? 'light' : 'dark',
      }
    ))
  }

return (
  <>
  <ThemeContext.Provider value={theme}>
    <Navigation />
  </ThemeContext.Provider>
  <UserContext.Provider value={user}>
  <ThemeContext.Provider value={theme}>
    <Home />
  </ThemeContext.Provider>
  </UserContext.Provider>
  </>
)
}
export default App

家

import Card from 'react-bootstrap/Card'
import Button from 'react-bootstrap/Button'
import Alert from 'react-bootstrap/Alert'
import UserContext from './UserContext'
import { useContext } from 'react'

function Home() {
  let user = useContext(UserContext)

  return (
    <>
      <Alert variant="success">Welcome back, {user.name}!</Alert>
      <Card className="text-center col-md-10 mx-auto my-3">
        <Card.Header>Featured</Card.Header>
        <Card.Body>
          <Card.Title>This is Our Featured Item</Card.Title>
          <Card.Text>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </Card.Text>
          <Button variant="primary">Click Here</Button>
        </Card.Body>
      </Card>
    </>
  )
}

export default Home

Answer 2

您需要传递，然后可以使用home.js文件中的props.name访问它。

Answer 3

这是因为此行让用户= USECONTEXT（USERERCONTEXT）正在存储undefined in user use ，这是正常的，因为您没有包装home内部usercontext.provider，并给出用户内部app作为值。

更改App内的返回：

return (
  <>
  <ThemeContext.Provider value={theme}>
    <Navigation />
  </ThemeContext.Provider>
  <UserContext.Provider value={user}>
    <Home />
  </UserContext.Provider>
  
  </>
)

您可以简化Home内的返回：

return (
    <>
      <Alert variant="success">Welcome back, {user.name}!</Alert>
      <Card className="text-center col-md-10 mx-auto my-3">
        <Card.Header>Featured</Card.Header>
        <Card.Body>
          <Card.Title>This is Our Featured Item</Card.Title>
          <Card.Text>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </Card.Text>
          <Button variant="primary">Click Here</Button>
        </Card.Body>
      </Card>
    </>
  )

Answer 4

您没有将应用程序组件与UserContext.provider相关联，因此用户对象没有值。尝试此操作

<UserContext.Provider value={user}>
<ThemeContext.Provider value={theme}>
    <Navigation />
  </ThemeContext.Provider>
  <ThemeContext.Provider value={theme}>
    <Home />
  </ThemeContext.Provider
</UserContext.Provider>

并使用可选的Chaning或操作员访问用户对象，以防止用户无效或未定义

{user && user.name }

或

{user?.name}