React Context 不能使用 Provider [英] React Context doesn't work using Provider

问题描述

我正在简化尝试使用 React 更新 context 的过程.>

我希望当我点击标题 Hello CodeSandbox 时，加载栏会显示 context api 数据.

代码示例:https://codesandbox.io/s/vyq3r7k4o5

使用上下文加载

export const LoadingState = {加载:假};const LoadingContext = React.createContext(LoadingState);export const LoadingProvider = LoadingContext.Provider;export const LoadingConsumer = LoadingContext.Consumer;const LinearIndeterminate = function() {const { 加载} = useContext(LoadingContext);返回 (<div>{加载&&<LinearProgress color=次要";/>}

);};

消费者

class App 扩展 PureComponent {状态 = {加载:假};添加 = () =>{const currentState = this.state.loading;this.setState({loading: !currentState });};使成为() {控制台信息(this.state)；返回 (
<h1 onClick={this.add}>Hello CodeSandbox</h1><加载中/><LoadingProvider value={this.state}>{this.state.loading}</LoadingProvider><h2>开始编辑，看看神奇的事情发生了！</h2>
);}}

解决方案

你的 Loading 组件应该位于 App 上下文提供者内部.

工作应用:https://codesandbox.io/s/z6yjl04vjx

 class App extends PureComponent {状态 = {加载:假};添加 = () =>{const currentState = this.state.loading;this.setState({loading: !currentState });};使成为() {控制台信息(this.state)；返回 (<div className="应用程序"><h1 onClick={this.add}>Hello CodeSandbox</h1><LoadingProvider value={this.state}><加载中/>/* 这一行被移动了.*/</LoadingProvider><h2>开始编辑，看看神奇的事情发生了！</h2>

);}}

I am simplifying trying to update the context with React.

I would like that when I click the title Hello CodeSandbox the loading bar is displayed with the context api data.

Code example: https://codesandbox.io/s/vyq3r7k4o5

Loading using Context

export const LoadingState = {
  loading: false
};
const LoadingContext = React.createContext(LoadingState);

export const LoadingProvider = LoadingContext.Provider;
export const LoadingConsumer = LoadingContext.Consumer;

const LinearIndeterminate = function() {
  const { loading } = useContext(LoadingContext);
  return (
    <div>
      {loading && <LinearProgress color="secondary" />}
    </div>
  );
};

Consumer

class App extends PureComponent {
  state = {
    loading: false
  };

  add = () => {
    const currentState = this.state.loading;
    this.setState({ loading: !currentState });
  };

  render() {
    console.info(this.state);
    return (
      <div className="App">
        <h1 onClick={this.add}>Hello CodeSandbox</h1>
        <Loading />
        <LoadingProvider value={this.state}>
          {this.state.loading}
        </LoadingProvider>
        <h2>Start editing to see some magic happen!</h2>
      </div>
    );
  }
}

解决方案

Your Loading component should reside inside of App context provider.

working app: https://codesandbox.io/s/z6yjl04vjx

 class App extends PureComponent {
  state = {
    loading: false
  };

  add = () => {
    const currentState = this.state.loading;
    this.setState({ loading: !currentState });
  };

  render() {
    console.info(this.state);
    return (
      <div className="App">
        <h1 onClick={this.add}>Hello CodeSandbox</h1>
        <LoadingProvider value={this.state}>
           <Loading /> /* This line is moved. */
        </LoadingProvider>
        <h2>Start editing to see some magic happen!</h2>
      </div>
    );
  }
}

这篇关于React Context 不能使用 Provider的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！