Question

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

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

WizardStore：

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属性。我认为，因为向导组件使用其中的存储渲染，任何时候更改currentStep都会导致重新渲染，但事实并非如此。感谢任何帮助！

Answer 1

我实际上已经完成了所有工作，但我不知道为什么。我确实重启了vsCode，所以它可能是一些不稳定的东西。

React Mobx向导不会重新渲染

1 个答案: