为什么当没有从提供者传递任何值时，react-context 返回 undefined，而不是返回默认值？

Question

I have created react context object with a default value like that:

const Mycontext = React.createContext("green");

and expected when no value passed to Proivder

the Consumer will get the defualt value I passesed it but rather than it return undefined

please take a look at this simple example on sandbox and tell me what is my wrong

Answer 1

The defaultValue argument is only used when a component does not have a matching Provider above it in the tree.

Found in paragraph 2 here https://reactjs.org/docs/context.html#reactcreatecontext

Since you have a provider, regardless of the provider having a value or not, the context won't use the default. If the context can't find a provider, it'll fallback to the default.

const MyContext = createContext("I'm the default value")

function MyProvider(props) {
  return <MyContext.Provider {...props} />
}

function MyConsumer() {
  return (
    <MyContext.Consumer>{(value) => console.log(value)}</MyContext.Consumer>
  )
}

// Should not use the default from createContext since there is a valid provider.
function AppWithProvider() {
  return (
    <MyProvider>
      <MyConsumer />
    </MyProvider>
  )
}

// Should use the default from createContext since there is no provider.
function AppWithoutProvider() {
  return <MyConsumer />
}

Check it out here https://codesandbox.io/s/condescending-taussig-6n7tq .