React Context API，更新上下文

Question

我想在一些网络调用完成后在运行时设置上下文（只有那时我知道需要在我的应用程序中访问的值），但我不知道如何保持这个值。

我可以像这样更新上下文值：

<NetworkVersion.Provider value={{version: this.state.version}}>

我可以在哪里使用组件的状态。 这种方法取自官方的React文档。

但我很惊讶地发现此Provider的其他使用者获得了在React.createContext（）调用中初始化的默认值（空对象）。 有没有办法在运行时更新Context并在应用程序的生命周期内保留该值？

Answer 1

确保您的Context Consumer是关联Provider的子级，否则它将获得默认值。 请参阅https://reactjs.org/docs/context.html#consumer

你也可以更好地传递一个原始值 - 即

<NetworkVersion.Provider value={this.state.version}>

或者你可能会得到不必要的重新渲染。 请参阅https://reactjs.org/docs/context.html#caveats

Answer 2

消费者必须是提供者的孩子才能获得上下文。 如果不可能使您的消费者成为提供者的子女，那么将共同父母作为提供者并向上下文添加回调以使消费者有可能更改上下文。

 const NetworkVersion = React.createContext({ version: null, setVersion: version => {} }); class Parent extends React.Component { state = { networkContext: { version: null, setVersion: version => this.setState({ networkContext: {...this.state.networkContext, version} }) } }; render() { return <NetworkVersion.Provider value={this.state.networkContext}> <VersionGetter/> <VersionSetter/> </NetworkVersion.Provider>; } } function VersionGetter() { return <NetworkVersion.Consumer> {networkContext => ( <div>Version: {networkContext.version}</div> )} </NetworkVersion.Consumer>; } function VersionSetter() { return <NetworkVersion.Consumer> {networkContext => ( <div> <button onClick={() => networkContext.setVersion('1.0')}>Set version 1</button> <button onClick={() => networkContext.setVersion('2.0')}>Set version 2</button> </div> )} </NetworkVersion.Consumer>; } ReactDOM.render(<Parent/>, document.body); 

 <script src="https://cdn.jsdelivr.net/npm/react@16.4.1/umd/react.production.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/react-dom@16.4.1/umd/react-dom.production.min.js"></script>