Question

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

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

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

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

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

Answer 1

确保您的Context Consumer是关联Provider的子级，否则它将获得默认值。见customSorting

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

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

或者您可能会得到不必要的重新渲染。见https://reactjs.org/docs/context.html#consumer

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>

React Context API，更新上下文

2 个答案: