时间戳

首页 > 解决方案 > useContext 返回一个空数组

reactjs - useContext 返回一个空数组

问题描述

我正在创建一个功能组件并尝试将其状态作为上下文传递。useEffect钩子用数据填充状态，我创建了一个自定义钩子来给我返回结果。当我尝试在另一个组件中使用它时，我总是得到一个空数组。请帮忙

上下文组件：

import React, {useState, useEffect, useContext, createContext} from 'react'
import DB from './Database'

export const Database = createContext()

export const useFeaturedHotels = () => {
  return useContext(Database)
}

export const DatabaseProvider = ({children}) => {
  const [state, setState] = useState({
    featuredHotels: [],
  })

  useEffect(() => {
    const featuredHotels = DB.hotels.filter((hotel) => hotel.featured === true)
    setState(featuredHotels)
  }, [])

  return <Database.Provider value={state}>{children}</Database.Provider>
}

孩子 ：

import React from 'react'
import {useFeaturedHotels} from './DatabaseContext'
import Card from '@material-ui/core/Card'
import CardContent from '@material-ui/core/CardContent'
import Button from '@material-ui/core/Button'
import {makeStyles} from '@material-ui/core'

const HomeHotels = () => {
  const classes = useStyles()
  const featuredHotels = useFeaturedHotels() // ----> always empty array
  console.log(featuredHotels)
}

标签： reactjs

解决方案

我确实推荐这样使用，

import React, {useState, useEffect, useContext, createContext} from 'react'
import DB from './Database'

export const Database = createContext()

export const DatabaseProvider = ({children}) => {
  const [state, setState] = useState({
    featuredHotels: [],
  })

  useEffect(() => {
    const featuredHotels = DB.hotels.filter((hotel) => hotel.featured === true)
    setState(featuredHotels)
  }, [])

  return <Database.Provider value={state}>{children}</Database.Provider>
}

import React from 'react'
import {Database} from './DatabaseContext'
import Card from '@material-ui/core/Card'
import CardContent from '@material-ui/core/CardContent'
import Button from '@material-ui/core/Button'
import {makeStyles} from '@material-ui/core'

const HomeHotels = () => {
  const classes = useStyles()
  const featuredHotels = useContext(Database)
  console.log(featuredHotels)
}

这个，应该工作。我从来没有用过你的模式。我现在正在看它为什么它不起作用

推荐阅读