如何解决：上下文提供程序没有将新的上下文值传递给子项

Question

我刚开始使用 React Hooks 和 React Context，我想知道为什么我的 Context Provider 似乎没有将新值传递给子组件。我已将其设置为初始值“ColorContext”为“红色”，但我希望按钮中“ColorContext”的值为“绿色”。但是，当我尝试这样做时，“ColorContext”值不会改变并保持“红色”。这是我的代码的链接：https : //stackblitz.com/edit/react-8mhqwuimport React, { Component, useState, useContext, createContext } from 'react';import { render } from 'react-dom';const ColorContext = createContext('red')const App = (props) => {  return (    <div className="app">      <ColorContext.Provider value= {'green'}>        <button        style = {{backgroundColor: useContext(ColorContext)}}        >          Click here        </button>      </ColorContext.Provider>    </div>  )}render(<App />, document.getElementById('root'));

Answer 1

见钩子规则：

只在顶层调用钩子

不要在循环、条件或嵌套函数中调用 Hook。相反，始终在 React 函数的顶层使用 Hook。通过遵循此规则，您可以确保每次渲染组件时以相同的顺序调用 Hook。

因此，使用useContexthook 来创建一个新的消费组件是一种很好的做法。

const ColorContext = createContext('red');

const Button = () => {

  const value = useContext(ColorContext);

  return (

    <button style = {{backgroundColor: value}}

    >

      {value}

    </button>

  );

};

const App = (props) => {  

  return (

    <div className="app">

      <ColorContext.Provider value={'blue'}>

        <Button />

      </ColorContext.Provider>

    </div>

  )

};

Answer 2

您需要App使用上下文包装组件。

const App = (props) => {

  return (

    <div className="app">

        <button

        style = {{backgroundColor: useContext(ColorContext)}}

        >

          Click here

        </button>

    </div>

  )

}

render(<ColorContext.Provider value= {'green'}><App /></ColorContext.Provider>, document.getElementById('root'));

Answer 3

从反应 useContext文档：

当<MyContext.Provider>组件上方最近的更新时，此 Hook 将使用传递给该 MyContext 提供程序的最新上下文值触发重新渲染。...

useContext(MyContext)只允许您阅读上下文并订阅其更改。您仍然需要树中的a <MyContext.Provider> above来提供此上下文的值。

这意味着上下文需要位于您要更新的组件之上。即它需要是<App />您示例中组件的父级。

因此，Giang 是对的，您需要<App />在ColorContext.Provider组件中定义。