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

您需要使用上下文包装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 2

请参见Gist：

仅位于顶层的呼叫挂钩

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

因此，有一个使用useContext钩子的新消费组件是一种很好的做法。

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 3

因为您在useContext组件中App。因此它将在树中的调用组件（nearest context）上方找到App。找不到结果。因此，它将使用您在App组件中的上下文中传递的默认值（'red'）而非默认值（'green'）。您需要将按钮包装到一个新组件上，并在该组件中useContext。

const ContextButton = () => (
  <button type="button" style={{ backgroundColor: useContext(ColorContext) }}>
    Click here
  </button>
);

Answer 4

从react useContext docs：

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

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

这是说上下文需要在要更新的组件上。即在您的示例中，它必须是<App />组件的父级。

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

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

4 个答案: