Question

React，无法使用上下文内的值，获取未捕获的类型错误：无法读取未定义的属性

2022-06-26

447

javascript reactjs

我的主页没有呈现任何内容。我检查了 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.Provider 包装主页并传递您想要提供的用户。此外，您可以删除主页中的 UserContext.Consumer 标记，因为您使用 Hooks 方法从上下文中进行使用。

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 访问它，也可以在 Home.js 函数中传递 props。

Tejendra Singh Rajawat

2022-06-26

Answer 3

这是因为 let user = useContext(UserContext) 这一行将 undefined 存储在 user 中，这是正常的，因为您没有将 Home 包装在 UserContext.Provider 中，而是将 User 中的 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>
    </>
  )