Shulou(Shulou.com)05/31 Report--

The knowledge of this article "React data sharing useContext how to achieve" is not quite understood by most people, so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "React data sharing useContext how to achieve" article.

Question:

ReferenceError: Cannot access' Context' before initialization This error happened while generating the page. Any console logs will be displayed in the terminal window.

Reference error, unable to access Context before initialization, occurred when the page was generated. The output is also displayed in the Shell console.

I have tried a lot of methods, such as changing references, relocating multiple Provider, or even keeping only one, but it still can't be solved.

Later I tried the type issue of the possible build declaration.

I am usually more casual about the way I write the build.

One of my favorite ways is

Import {useState, createContext} from 'react'import Me from'. / me'export const MyContext = createContext ({}); export default function Demo () {const [say, setSay] = useState (''); return (father who is talking {say})}

React.FC is functional component writing, is a generic type used in TypeScript, FC is the abbreviation of FunctionComponent, in fact React.FC can be written as React.FunctionComponent (I feel too redundant in this way)

Import React, {createContext, FunctionComponent, useState} from 'react'import Me from'. / me'interface DemoProps {say: string; setSay: React.Dispatch; demoString?:string;} const defaultDemoProps: DemoProps = {isDay: true, setIsDay: (day) = > day}; export const MyContext = createContext ({... defaultDemoProps}); const Demo: React.FC = ({children,... props}) = > {const {say: propIsSay} = props Const [isSay, setSay] = useState (propIsDay) return} export default Demo

There are also many habits of using class components.

Import React, {createContext, PureComponent} from 'react'import Me from'. / me'export const MyContext = createContext ({}) export default class Demo extends PureComponent {state = {say:true,} setSay () = > {let say =! this.state.say this.setState ({say});} render () {return ()}}

There are three ways to construct it.

The three properties returned by the createContext function are Provider (provider), Customer (consumer), and displayName (seemingly unneeded)

Import React, {Context, PureComponent} from 'react';import {MyContext} from'.. / components/classDemo';export const MyContext = React.createContext () export default class CurstomerDemo extends PureComponent {static contextType = MyContext / / this sentence is used to specify constructor (props) {super (props) } handleClick = () = > {console.log (this.context) / / get context Provider attribute} render () {return (Provider Customer)}} import React, {useState, useContext CreateContext} from 'react'import {MyContext} from'. / Demo'function useCountContext (CounterContext) {const context = useContext (MyContext) / / key words Used to get the specified online text Context if (! context) {throw new Error ('useCountContext must used within Context.Provider')} return context} export default function Me (props) {let context = useCountContext (MyContext) let {say, setSay} = context return (me {setSay (say +', comrades')}} > come from grandpa Provier {say})}

In fact, the key is to use the function to accept the Provider of the function, the class component to accept the Provider of the class component. To ensure the consistency of the structure.

Personally, I think PS:useContext is very good for small projects, but for complex data, his hierarchical consciousness is still not clear enough. Thunk, saga and mobx are all more suitable for context in layering to some extent. Of course, you can also further encapsulate context. What suits you is the best!

The above is about the content of this article on "how to achieve React data sharing useContext". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more related knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.