MobX，React Router v4，使用渲染功能的路由在存储更改时不观察和重新渲染

Question

使用需要将道具传递给组件的路线，我传递了一个布尔值，该布尔值可从我的商店中观察到。当这个值改变时，路由渲染的组件不会更新。

<Switch>
    <Route exact path="/" render={()=><MyComponent isLoading={this.props.MyMobxStore.ShowMyComponentLoader} />} />
</Switch>

这个组件是 Observable 并且注入了 MyMobxStore。如果我更改该可观察对象，组件 "MyComponent" 不会重新呈现或通知更改。

如果我在我的顶级组件上任意调用 "setState"，它会起作用。或者如果我添加一个虚拟元素，例如

<div idk={this.props.MyMobxStore.ShowMyComponentLoader}/>

这使得当前组件重新渲染，使得依赖于此可观察对象的 "MyComponent" 的行为符合预期。

有没有我遗漏的明显解决方案？我可以添加这些技巧之一以使其工作。我可以将我的 "MyComponent" 包装在另一个可观察对象中并以这种方式传递它，但这不利于我的设计。虽然没那么重要。在这一点上，这纯粹是学术性的。我想知道为什么它不起作用。

更新

被要求包含更多代码。

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
import {inject, observer } from 'mobx-react';
import {MyComponent, CoolChildComponent} from '.coomComponents';

@inject('LoaderStore')
@observer
class App extends Component {
    
    componentWillMount() {
        this.props.LoaderStore.setShowLocalLoader(true);
        setTimeout(() => {
            this.props.LoaderStore.setShowLocalLoader(false);
        }, 5000);
    }
    

    render() {
        return( 
            <div>
            {/* note router container and "with router" wrapper one level up. */}
              <Switch>
                  <Route render={()=>{return <MyComponent isLoading={this.props.LoaderStore.showLocalLoader}><CoolChildComponent/></MyComponent>}} />
              </Switch>
            </div>
        );
    }
}

export default App;

注意，我知道解决这个问题的方法。我不明白的是为什么 MobX 没有意识到渲染正在使用 LoaderStore.showLocalLoader

Answer 1

听起来您缺少 MyComponent 的观察者包装器如果你支持装饰器，你可以使用@observer，否则你应该启用装饰器，如图所示here，

希望对您有所帮助，如果这是问题所在，请稍作解释：

当你在 mobx 存储中设置一个 observable 时，你可以通过几种方式对这个 observable 的变化做出反应（我只是列出 2 以获取更多选项，请参阅 mobx 文档）：

使用自动运行 - more info
使用@observable - more info

这两种方法的工作原理相同，只是在 observable 选项中发生的是渲染函数像自动运行一样工作

如果你在函数内部有一个可观察对象，它会在每次函数范围内的可观察对象发生变化时触发它

祝你好运！

Answer 2

尝试以下操作：

render() {
    const showLocalLoader = this.props.LoaderStore.showLocalLoader
    return( 
        <div>
        {/* note router container and "with router" wrapper one level up. */}
          <Switch>
              <Route render={()=>{return <MyComponent isLoading={showLocalLoader}><CoolChildComponent/></MyComponent>}} />
          </Switch>
        </div>
    );
}

这将使正确的值作为 prop 发送到路由，有一个问题，当 observable 嵌套在渲染的 return 值中时，有时值的变化不会触发 re-rendering。

让我知道它是否有效

MobX，React Router v4，使用渲染功能的路由在存储更改时不观察和重新渲染

MobX, React Router v4, Route using render function not observing and re-rendering when store changes

reactjs

mobx