时间戳

首页 > 解决方案 > 尝试触发 Mobx 操作会导致未捕获类型错误

reactjs - 尝试触发 Mobx 操作会导致未捕获类型错误

问题描述

我正在尝试触发 Mobx 操作，它正在生成错误“未捕获的类型错误：无法读取未定义的属性 'arrowVisible'。” 不知道为什么（功能被react-waypoint触发）：

（这里为codeandbox.io复制）

import React from "react";
import PropTypes from "prop-types";
import { Container, Row, Col } from "reactstrap";
import { observer, inject } from "mobx-react";
import Waypoint from "react-waypoint";

@inject("styleStore")
@observer
export class Questions extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      entered: false
    };
  }
  componentDidMount() {
    window.scrollTo(0, 0);
  }

  setWaypointEnter() {
    // Set waypoint state
    this.setState({ entered: true });
    // Use updated state for UI waypoints animation.
    if (this.state.entered) {
      this.props.styleStore.isArrowVisible("yes");
    }
  }

  render() {
    return (
        <QuestionsDiv id="questions">
          <Container>
            <Waypoint
              scrollableAncestor={window}
              onEnter={this.setWaypointEnter.bind(this)}
              fireOnRapidScroll={true}
              topOffset="40%"
            />
...

这是 MobX 商店：

import { observable, action } from "mobx";

class StyleStore {
  @observable nextLink;
  @observable arrowVisibile;

  @action
    isArrowVisibile(visibility) {
    this.arrowVisibile = visibility;
    console.log(this.arrowVisibile);
  }
}

export default StyleStore;

和 index.js 加载提供者：

import App from "./App";
import { BrowserRouter } from "react-router-dom";
import { Provider } from "mobx-react";
import StyleStore from "./stores/styleStore";
import registerServiceWorker from "./registerServiceWorker";

const stores = {
  styleStore: new StyleStore()
};

ReactDOM.render(
  <BrowserRouter>
    <Provider {...stores}>
      <App />
    </Provider>
  </BrowserRouter>,

  document.getElementById("root")
);
registerServiceWorker();

我也在使用react-app-rewire-mobx。所以 .babelrc 看起来像这样：

{
  "presets": ["mobx"]
}

我在这里缺少什么会导致此错误？另一个 MobX 操作 ChangeNextLink 以编码方式工作。

标签： reactjsmobx

解决方案

问题似乎在这里

 this.props.styleStore.arrowVisible();

arrowVisible 是一个可观察的属性，而不是一个动作，你可能打算调用

 this.props.styleStore.isArrowVisible();

您的商店也有拼写错误

@action
    isArrowVisibile(visibility)

应该

@action
    isArrowVisible(visibility)

推荐阅读