响应上下文API，更新上下文

Question

在某些网络调用完成后，我想在运行时设置上下文(只有这样，我才知道需要在整个应用程序中访问的值)，但我不知道如何持久化这个值。

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

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

我可以使用组件的状态。这种方法是从官方反应文档中采取的。

但是，我惊讶地发现，该提供程序的其他使用者得到的默认值(空对象)是在React.createContext()调用中初始化的。有没有一种方法可以在运行时更新上下文并在应用程序的生命周期内保留该值？

Answer 1

确保您的上下文使用者是关联提供程序的子程序，否则它只会得到默认值。请参阅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>

​