React 上下文突变不会重新渲染子模块

Question

我使用基于类的方法做出反应，并尽量避免使用Redux或Mobx之类的东西。我以为我可以只使用上下文 api。

在我App.tsx的render函数中，我基本上写道：

render() {
const appContext = {
modules: []
}
return <AppContext.Provider value={appContext}><Main /></AppContext.Provider>;
}

componentDidMountMain.tsx，我发送了两个http请求。第一个的结果设置本地状态，组件呈现良好。 有一个子组件要Main，称为Partner，其渲染函数基本上是：

render() {
let leadModule = null;
if (this.context.modules.includes('crm')) {
leadModule = <Leads />
}
return (
{leadModule}
);

第二个请求的结果在一秒钟后到达，它将数据推送到this.context.modules数组。然后数组包含crm，但是当然 React 怎么知道重新渲染子组件Partner并显示Leads？显然它没有，因为Leads组件从未出现过......除非，奇迹般地，填充modules的第二个请求在设置Main状态并触发第一个渲染的请求之前完成。

有没有办法在不从根本上改变我的方法的情况下做到这一点？

Answer 1

其实很简单。我必须在我的App组件(顶级组件(的状态中添加两件事：模块数组以及修改此数组的函数。类似的东西

constructor(props, context) {
super(props, context);
this.state = {
modules: [],
setModules: (modules) => {
this.setState({modules: modules});
}
};
}

然后将此状态作为我的提供程序的值传递：

render() {
return <AppContext.Provider value={this.state}><Main /></AppContext.Provider>;
}

最后，我的问题中提到的第二个http请求只需要调用

this.context.setModules(modules);

。包含作为响应收到的请求的模块列表。瞧，Lead模块出现了。

我觉得很愚蠢，但我在这个博客中找到了这个想法：如何在 React 中使用上下文 API .js 到 pubsub