触发MobX Action时出现Uncaught TypeError错误求助

让我们一步步排查你遇到的问题：

1. 核心问题：拼写错误（最直接的原因） #

你的错误提示是Cannot read property 'arrowVisible' of undefined，结合代码来看，是变量和方法名的拼写不一致导致的：

• 在你的MobX Store中，可观察变量定义为arrowVisibile（多了一个冗余的i），方法名是isArrowVisibile（同样拼写错误）
• 但在组件中你调用的是isArrowVisible（正确拼写的Visible），如果在渲染逻辑中还用到了styleStore.arrowVisible，Store里根本没有这个属性，进而触发错误。

2. 次要问题：setState的异步特性 #

你在setWaypointEnter方法中，调用this.setState后立刻访问this.state.entered，但setState是异步的，这会导致第一次触发Waypoint时，条件判断if (this.state.entered)永远为false，无法执行后续的Store动作。

修复步骤 #

第一步：修正Store中的拼写错误

把变量和方法名统一为正确的Visible拼写：

import { observable, action } from "mobx";

class StyleStore {
  @observable nextLink;
  @observable arrowVisible; // 修正拼写
  @action isArrowVisible(visibility) { // 修正方法名拼写
    this.arrowVisible = visibility;
    console.log(this.arrowVisible);
  }
}

export default StyleStore;

第二步：修复setState的异步逻辑

使用setState的回调函数，确保在state更新完成后再执行Store动作：

setWaypointEnter() {
  this.setState({ entered: true }, () => {
    // 此处state已完成更新
    if (this.state.entered) {
      this.props.styleStore.isArrowVisible("yes");
    }
  });
}

第三步：检查渲染逻辑

如果你的组件render方法中有访问styleStore.arrowVisible的代码，确保和Store中的变量名一致（已经修正为arrowVisible）。

额外验证 #

你的MobX配置（react-app-rewire-mobx和.babelrc）、Store注入逻辑看起来都是正确的，而且你提到其他MobX动作可以正常运行，说明基础的MobX集成没有问题。

内容的提问来源于stack exchange，提问作者Robbie