Контекст реакции от ребенка не меняется - PullRequest
Новая
       29

Контекст реакции от ребенка не меняется

1 голос
/ 24 марта 2020

Я прочитал решение из аналогичного вопроса, но это не помогло.
Вот мой простой код: https://codesandbox.io/s/gracious-jennings-ugqzd


import myContext from "./myContext";
import Two from "./Two.js";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      number: 0
    };
  }

  render() {
    return (
      <myContext.Provider value={this.state}>
        <div className="App">
          <Two />
          <h2>{this.state.number}</h2>
        </div>
      </myContext.Provider>
    );
  }
}

export default App;

Мне нужно настроить его так что это может быть где угодно в классе изменить номер переменной. Помощь приветствуется.

1 Ответ

1 голос
/ 24 марта 2020

Вы не можете просто изменить состояние, поэтому 

  componentDidMount() {
    this.context.number = 100;
  }

Если вы изменяете состояние, реакция не отображается, потому что вы изменили его. Вы можете сделать следующее:

В приложении: 

import React from "react";
import "./styles.css";
import myContext from "./myContext";
import Two from "./Two.js";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      number: 0
    };
  }
  increase = ()=> this.setState({number:this.state.number+1})

  render() {
    return (
      <myContext.Provider value={{...this.state,increase:this.increase}}>
        <div className="App">
          <Two />
          <h2>{this.state.number}</h2>
        </div>
      </myContext.Provider>
    );
  }
}

export default App;

В двух: 

import React from "react";

import myContext from "./myContext";

class Two extends React.Component {
  static contextType = myContext;

  render() {
    return (
      <myContext.Consumer>
        {({ number,increase }) => <h1 onClick={increase}>{number}</h1>}
      </myContext.Consumer>
    );
  }
}

export default Two;
...