标签: mobx-react

检索数据并设置obseravble数组,这里的代码如下:

import {observable} from 'mobx';

export interface IMenuModel{
    Id:number
    itemName:string;
    parentId?:number;    
}
 class MenuRepo {
    @observable menuItems? : IMenuModel[];
    constructor(){
    }
    getItems():void {
    fetch(`..`).then((response: Response): Promise<{ value:IMenuModel[] }>  => {
              return response.json();
            })
             .then((response: { value: IMenuModel[] }) : void => {
               this.menuItems = response.value;

      }, (error: any): void => {
        //exception handling
      });
    }
}

var menuCodes = new MenuRepo
export default menuCodes;

这是观察者阶级;

import * as React from 'react';
import {observer} from 'mobx-react';
import {IMenuModel} from './Codes';

@observer …

我对如何在代码中使用@action感到困惑。

class Items {

  @observable items= [];

  @action addItem() {
    let newItem= new Item();
    items.push(newItem);
  }
}

@observer
class ItemPage extends Component {

  constructor() {
    super();
  }

  render() {
    const {addItem} = this.props.store;
    return (
      <div className="items">
        <input type="button" value="add" onClick={addItem}/>
      </div>
    )
  }
}

const store = new Items();

我将mobX与React和Meteor结合使用,我需要能够将一个商店中保存的信息用于另一个商店.具体来说,我需要在商店B中引用商店A,以便调用商店A的操作,并通过订阅集合获取它已检索到的信息.我使用了@inject装饰器,但不知道如何调用该动作.谢谢

我正在将mobX用于我的本地反应项目。请考虑以下商店类别：

class Birds {
    @observable listOne = [];
    @observable fetchingListOne = false;
    @observable fetchErrorOne = '';

    @action setListOne = () => {
        this.fetchingListOne = true;
        api.getList()
            .then((data) => {
                this.listOne.replace(data);
                this.fetchingListOne = false;
            })
            .catch((error) => {
                this.fetchingListOne = false;
                this.fetchErrorOne = error;
            });
    };
}

这是反应成分：

@inject('BirdStore') @observer
export default class Flat extends React.Component {
    componentDidMount() {
        this.props.BirdStore.setListOne();
    }

    _renderHeader = () => {
        return <Text style={styles.listHeaderText}>
            Hello {this.props.BirdStore.listOne.length} is {this.props.BirdStore.fetchingListOne.toString()}
            </Text>;
    };

    _renderItem = ({item}) => …

我正在尝试建立一个新的项目React,Typescript和MobX.

出于某种原因,我无法让MobX工作.这是一段相对简单的代码,但它给了我这个错误.

未捕获的错误:MobX注入器:商店'appState'不可用!确保它是由某个提供商提供的

这是我的代码:

AppState.ts

import {observable} from "mobx"
import {observer} from "mobx-react"

export class AppState {
    @observable public greeting = "hello World"
}

index.tsx

import * as React from "react"
import * as ReactDOM from "react-dom"
import { Provider } from "mobx-react"
import { Router, Route, Switch } from "react-router"
import { createBrowserHistory } from "history"
import MuiThemeProvider from "material-ui/styles/MuiThemeProvider"
"./containers/BookingStep/BookingStepContainer";
import { TestContainer } from "./containers/TestContainer";
import { AppState } from "./store/AppState";

const history = createBrowserHistory()

ReactDOM.render(
  <Provider …

我试图mobx用我的React 360制作一个vr应用程序。我尝试使用装饰器语法，但是在浪费大量时间尝试实现它之后，我决定使用nondecorator语法。这是我遇到问题的mobx文档中遇到的一个示例。这是代码：

import {observer} from "mobx-react";

var timerData = observable({
    secondsPassed: 0
});

setInterval(() => {
    timerData.secondsPassed++;
}, 1000);

@observer class Timer extends React.Component {
    render() {
        return (<span>Seconds passed: { this.props.timerData.secondsPassed } </span> )
    }
};

ReactDOM.render(<Timer timerData={timerData} />, document.body);

注意类observer上的声明Timer。文档指出了这一点。

请注意，使用@observer作为装饰器是可选的，observer（class Timer ... {}）实现的效果完全相同。

这是实现的正确方法Timer吗？

observer(class Timer extends React.Component {
  render() {
    return (<span>Seconds passed: { this.props.timerData.secondsPassed } </span> )
  }
}) 

对于那些使用mobx+编写应用程序的人react，我想知道在带有&的 react 组件中使用事件处理程序时是否有更好的方法来处理上下文问题（例如，在商店中this.返回）。undefinedmobxonClickinjectobserver

我一直在写处理程序onClick={actionFromStore.bind(this.props.theStore)}来解决这个问题，但似乎应该有更简洁的方法来做到这一点，我不知道。

我不是 mobx 专家，任何建议将不胜感激！

这里的操作是异步获取请求

简单地用 包裹 React 组件observer()似乎会导致它们渲染两次。可能的原因是什么？我正在运行最新版本的 react 16.8.3、mobx 5.9.4 和 mobx-react-lite 1.2.0

例如：

import React from "react";
import { observer } from "mobx-react-lite";

const Item = observer(() => {
  return (
    <div>
      {console.log("render item")}
      Item
    </div>
  );
});

export default Item;

这发生在相对复杂的应用程序中。我在调试另一个问题时注意到了这种行为。然后我删除了尽可能多的代码，并能够在一个非常简单的情况下重现该问题。

编辑：请参阅下面的答案。我能够通过尝试使用 codeandbox 进行 repo 来确定问题。

我有这个基本模型。

const stuff = types.model({
  term: types.string,
  excludeTerm: types.string,
  stores: types.array(types.string)
}).actions(self => ({
  setTerm(term: string) {
    self.term = term
  },
  setExcludeTerm(term: string) {
    self.excludeTerm = term
  },
  setStores(stores: string[]) {
    self.stores = stores   // <<< the lint error is on this line
  }
}))

我收到以下TS Lint错误：

Type 'string[]' is not assignable to type 'IMSTArray<ISimpleType<string>> & IStateTreeNode<IArrayType<ISimpleType<string>>>'. Type 'string[]' is missing the following properties from type 'IMSTArray<ISimpleType<string>>': spliceWithArray, observe, intercept, clear, and 4 more.ts(2322)

这是一个令人讨厌的错误。我可以这样分配来修复它：(self as any).stores = stores …

我目前正在编写一个 React 应用程序，当任何可观察的值发生变化时，它应该能够重新渲染组件。问题是，email如果它发生变化，我将无法重新渲染。

store.ts

export class ExampleStore {
  @observable email = 'hello';

  @action setEmail(email: string) {
    this.email = email;
  }
}

索引.tsx

const stores = {
  exampleStore
};

ReactDOM.render(
  <Provider {...stores}>
    <App />
  </Provider>,
  document.querySelector('#root')
);

应用程序.tsx

interface Props {
  exampleStore?: ExampleStore;
}

@inject('exampleStore')
@observer
export class App extends React.Component<Props, {}> {
  componentDidMount() {
    setInterval(() => {
      this.props.exampleStore!.setEmail(Math.random() * 10 + '');
    }, 2500);
  }

  render() {
    const { email } = this.props.exampleStore!;
    return <div>{email}</div>;
  }
}

我见过很多使用 …