使用 createContext 和useContext不能使用的问题

最新推荐文章于 2024-10-14 17:33:09 发布

原创最新推荐文章于 2024-10-14 17:33:09 发布 · 706 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react

各种bug 专栏收录该内容

2 篇文章

订阅专栏

在尝试使用`createContext`和`useContext`进行状态管理时，遇到在`Header`组件中无法获取到颜色值的问题。问题出在当前路由的入口文件`list.js`未正确使用`useContext`钩子，导致`Header`组件始终接收不到上下文传递的值。当直接访问首页时，由于`index.js`正确设置了`useContext`，所以能正常获取到颜色。

pages/index.js
import React, { useState, createContext } from 'react'
import Header from '../components/Header'
export const MylistContext = createContext({});
export default function Home(list) {
 const color = { color: 'blue' }
 return (
  <>
      <Head><title>Home</title></Head>
      <MylistContext.Provider value={color}>
        <Header />
      </MylistContext.Provider>
 <>
}

Header 头部

import React, { useState, useEffect, useContext } from 'react'
import { MylistContext } from '../pages/index'
const Header = () => {
    const { color } = useContext(MylistContext)
    console.log(MylistContext)
    console.log(color)
   	return(
		<div></div>
    )
   }