如何修复：上下文提供者未将新的上下文值传递给子项

Question

我是 React Hooks 和 React Context 的新手，我想知道为什么我的 Context Provider 似乎没有将新值传递给子组件。我将其设置为初始值 "ColorContext" 为 'red'，但我希望按钮中 "ColorContext" 的值为 'green'。但是，当我尝试这样做时，"ColorContext" 值不会改变并保持 'red.'

这是我的代码的 link： 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

见Hook Rules:

Only Call Hooks at the Top Level

Don’t call Hooks inside loops, conditions, or nested functions. Instead, always use Hooks at the top level of your React function. By following this rule, you ensure that Hooks are called in the same order each time a component renders.

因此，有一个使用 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 组件中。因此它将在树中找到调用组件 (App) 上方的 nearest context。结果没有找到。因此它采用默认值 ('red') 而不是您在 App 组件的上下文中传递的值 ('green')。您需要将按钮包装到一个新组件中，并在该组件中 useContext。

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

Answer 4

来自反应 useContext docs:

When the nearest <MyContext.Provider> above the component updates, this Hook will trigger a rerender with the latest context value passed to that MyContext provider. ...

useContext(MyContext) only lets you read the context and subscribe to its changes. You still need a <MyContext.Provider> above in the tree to provide the value for this context.

这意味着上下文需要高于您要更新的组件。 IE。它必须是您示例中 <App /> 组件的父组件。

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

如何修复：上下文提供者未将新的上下文值传递给子项

How to fix: Context Provider not passing new context values down to children

javascript

reactjs

react-context

react-hooks