React Mobx 向导不重新渲染

Question

我遇到了 mobX 未触发渲染的问题。想象一个带有 next/previous 按钮的向导来加载步骤（其他组件）。首先是代码（在 TypeScript 中）-

*(注意 - 我更改了名称并简化了这段代码以仅显示问题，实际项目完全不同)

精灵商店：

export class WizardStore {
    @observable private currentStep = 0;

    @action public getCurrentStep() {
        return this.currentStep;
    }

    @action public goNext() {
        this.currentStep += 1;
    }
}

WizardHost 组件：

@observer @inject('wizardStore')
export default class WizardHost extends React.Component<IProps, {}> {       
    public render() {
        return (
            <div>                    
                <Wizard />
                <button onClick={() => this.props.wizardStore.goNext()}>Next</button>
            </div>
        );
    }
}

向导：

@observer @inject('wizardStore')
export default class Wizard extends React.Component<IProps, {}>{
    public render() {    
        return <div>{this.props.wizardStore.getCurrentStep()}</div>;            
    }
}

问题：当我单击“下一步”按钮时，商店中的代码被触发并且 currentStep 属性正在更新。向导组件不会呈现更改。

我认为问题在于我的按钮正在更新存储属性 currentStep，但 WizardHost 中的渲染并未直接使用 currentStep 属性。我认为因为 Wizard 组件在它的渲染中使用商店，所以它会在 currentStep 更改时导致重新渲染，但事实并非如此。感谢任何帮助！

Answer 1

我实际上一切正常，但我不知道为什么。我确实重新启动了 vsCode，所以它可能有些不正常。

React Mobx 向导不重新渲染

React Mobx Wizard not re-rendering

typescript

reactjs

mobx

mobx-react