Question

React Context API，更新上下文

2018-04-19

5892

javascript reactjs react-native

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

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

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

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

但我很惊讶地发现，此提供程序的其他消费者获得了在 React.createContext() 调用中初始化的默认值（一个空对象）。有没有办法在运行时更新上下文并在应用程序的整个生命周期内保留该值？

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/[email protected]/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/umd/react-dom.production.min.js"></script>