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

Question

我刚开始使用 React Hooks 和 React Context，我想知道为什么我的 Context Provider 似乎没有将新值传递给子组件。我已将其设置为初始值“ColorContext”为“红色”，但我希望按钮中“ColorContext”的值为“绿色”。但是，当我尝试这样做时，“ColorContext”值不会改变并保持“红色”。

这是我的代码的链接：https : //stackblitz.com/edit/react-8mhqwu

import 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 = () => {&nbsp; const value = useContext(ColorContext);&nbsp; return (&nbsp; &nbsp; <button style = {{backgroundColor: value}}&nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; {value}&nbsp; &nbsp; </button>&nbsp; );};const App = (props) => {&nbsp;&nbsp;&nbsp; return (&nbsp; &nbsp; <div className="app">&nbsp; &nbsp; &nbsp; <ColorContext.Provider value={'blue'}>&nbsp; &nbsp; &nbsp; &nbsp; <Button />&nbsp; &nbsp; &nbsp; </ColorContext.Provider>&nbsp; &nbsp; </div>&nbsp; )};

Answer 2

您需要App使用上下文包装组件。const App = (props) => {&nbsp; return (&nbsp; &nbsp; <div className="app">&nbsp; &nbsp; &nbsp; &nbsp; <button&nbsp; &nbsp; &nbsp; &nbsp; style = {{backgroundColor: useContext(ColorContext)}}&nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Click here&nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; </div>&nbsp; )}render(<ColorContext.Provider value= {'green'}><App /></ColorContext.Provider>, document.getElementById('root'));

Answer 3

从反应 useContext文档：当<MyContext.Provider>组件上方最近的更新时，此 Hook 将使用传递给该 MyContext 提供程序的最新上下文值触发重新渲染。...useContext(MyContext)只允许您阅读上下文并订阅其更改。您仍然需要树中的a&nbsp;<MyContext.Provider>&nbsp;above来提供此上下文的值。这意味着上下文需要位于您要更新的组件之上。即它需要是<App />您示例中组件的父级。因此，Giang 是对的，您需要<App />在ColorContext.Provider组件中定义。