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

Question

使用需要将 props 传递到组件的路由，我传递一个可以从我的商店观察到的 bool 值。当此值更改时，路由渲染的组件不会更新。

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

该组件是 Observable 的，并通过 MyMobxStore 注入(inject)。如果我更改该可观察值，则不会重新渲染组件“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

尝试以下操作:

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>
    );
}

这将导致正确的值作为属性发送到路由， 存在一个问题，当 observable 嵌套在 render 的返回值中时，有时值的变化不会触发重新渲染。

让我知道它是否有效