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>