反应：如何使用ComponentDidMount中的使用者来更改状态？

Question

所以我使用React的上下文是因为我必须沿相反的方向更改状态。
例如：
App.js （具有状态） <--- 我的组件 （更改App中的状态） .js）
我知道如何使用onClick事件来执行此操作。但是，我无法理解如何在componentDidMount（）中执行此操作。我创建了一个基本示例来说明我要实现的目标：

MyComponent.js

import { MyConsumer } from '../App.js';

export default class MyComponent extends Component {
    componentDidMount() {
        // TRYING TO CHANGE STATE IN COMPONENTDIDMOUNT
        <MyConsumer>
            {({ actions }) => actions.setMyState(true)}
        </MyConsumer>
    }
    render() {
        return (
            <SearchConsumer>
                {({ actions }) => {
                    return (
                        <div onClick={() => actions.setMyState(true)}>
                            My content
                        </div>
                    )
                }}
            </SearchConsumer>
        )
    }
}

App.js

export const SearchContext = createContext();
export const SearchProvider = SearchContext.Provider;
export const SearchConsumer = SearchContext.Consumer;

class App extends Component {
    constructor (props) {
        super (props)
        this.state = {
            setMyState: 0,
        }
    }
    render(){
        return(
            <SearchProvider value={
                {
                    actions: {
                        setMyState: event => {
                            this.setState({ setMyState: 0 })
                        },
                    }
                }
            }>
                <Switch>
                    <Route 
                    exact path='/' render={(props) => <MyComponent />}
                    />
                </Switch>
            </SearchProvider>
        )
    }
}

Answer 1

如果您使用的是React 16.6.0或更高版本，并且仅使用一个上下文使用者，那么最简单的方法是使用contextType（请注意，这是单数，而不是复数）。这将导致做出反应，使值在this.context上可用，然后可以在生命周期挂钩中使用它。例如：

// In some other file:

export default MyContext = React.createContext();

// and in your component file

export default class MyComponent extends Component {
  static contextType = MyContext;
  componentDidMount() {
    const { actions } = this.context;
    actions.setMyState(true);
  }
    // ... etc
}

如果您使用的是旧版本，因此无法使用contextType，或者需要从多个上下文中获取值，则需要将组件包装到另一个组件中并传递上下文通过道具进入。

// In some other file:

export default MyContext = React.createContext();

// and in your component file

class MyComponent extends Component {
  static contextType = MyContext;
  componentDidMount() {
    const { actions } = this.props;
    actions.setMyState(true);
  }
    // ... etc
}

export default props => (
  <MyContext.Consumer>
    {({ actions }) => (
      <MyComponent actions={actions} {...props} />
    )}
  </MyContext.Consumer>
);

Answer 2

我感谢尼古拉斯·塔（Nicholas Tower）的回答，解决了我的问题。我没有在React中使用contextType，而是只是将我的操作作为prop传递给了另一个组件。这样，如果我只是将其作为道具传递，我仍然可以使用所有消费者的东西。

class MyComponent extends Component {
  componentDidMount() {
    this.props.actions.setMyState(true);
  }
    // ... etc
}
export default class MyComponentTwo extends Component {
  render(){
    return(
      <MyConsumer>
        {({ actions }) => (
          <MyComponent actions={actions}/>
        )}
      </MyConsumer>
    )
  }
);