Question

使用需要传递给组件的props的路由，我传入一个可以从我的商店观察到的布尔值。当此值更改时，路径呈现的组件不会更新。

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

此组件是Observable并使用MyMobxStore注入。如果我改变了那个可观察的，组件＆＃34; MyComponent＆＃34;不会重新呈现或通知有关更改。

如果我打电话给任何＆＃34; setState＆＃34;在我的顶级组件上，它的工作原理。或者如果我添加一个虚拟元素，如

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

使当前组件重新渲染，以便＆＃34; MyComponent＆＃34;取决于这种可观察性的行为与预期一致。

我是否有一个明显的解决方案？我可以添加其中一个黑客来使它工作。我可以包装我的＆＃34; MyComponent＆＃34;在另一个可观察的地方并以此方式传递，但这并不符合我的设计。虽然它并不重要。在这一点上，这纯粹是学术性的。我想知道它为什么不起作用。

更新

被要求包含更多代码。

＆＃13;

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;

＆＃13;

请注意，我知道如何解决这个问题。我不明白为什么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>
    );
}

这将导致正确的值作为prop发送到Route，有一个问题是，当observable嵌套在render的返回值中时，有时值的变化不会触发重新呈现。

让我知道它是否有效

Answer 2

听起来你错过了MyComponent的观察者包装器你可以使用@observer，如果你有装饰器的支持，你应该启用装饰器，如图所示here，

希望有所帮助，如果这里的问题是一个小解释：

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

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

这两种方法都遵循相同的原则，只是在可观察的选项中，发生的事情就是渲染函数像自动运行一样工作

如果你在函数内部有一个observable，它会非常直接，它会在每次函数范围内的observable改变时触发它

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

2 个答案: