标签: mobx-react

所以我用https://facebook.github.io/react/blog/2016/07/22/create-apps-with-no-configuration.html创建了一个没有配置的应用程序

我安装了mobx和mobx-react,但仍然在@ symb之前显示意外令牌的错误.

我是否需要添加其他内容,或者我当前的配置是错误的？:(

的package.json

"devDependencies": {
"react-scripts": "0.8.4",
"babel-core": "^6.7.6",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0"
},
"dependencies": {
"autobind-decorator": "^1.3.4",
"classnames": "^2.2.5",
"lodash": "^4.15.0",
"mobx": "^2.5.1",
"mobx-react": "^3.5.5",
"react": "^15.3.1",
"react-dom": "^15.3.1",
"validator": "^5.6.0"
 },

.babelrc

{
  "presets": ["es2015", "stage-0", "react"],
  "plugins": [
      "transform-decorators-legacy",
      "transform-class-properties"
  ]
}

和代码

import React, { Component } from 'react';
import { action, observable } from 'mobx'
import {observer} from 'mobx-react';


class App {
    @observer cake = [];
} …

我正在尝试学习如何在 React 中使用 MobX，但我不明白为什么需要使用 Provider 或 Context，如果保持状态的对象永远不会改变，只有它的内容。

例如，我在 store.js 中有一个商店（一个随时间变化的简单计时器）：

import { decorate, observable, action } from 'mobx';
import React from 'react';

class TheTimer {
    currentTick = 0; // In seconds since start

    tick = () => {
        this.currentTick = Math.floor(performance.now() / 1000);
    }
}

decorate(TheTimer, {
    currentTick: observable,
    tick: action
});

// Bare store
export const timerStore = new TheTimer();
// Store as React context
export const TimerStoreContext = React.createContext(timerStore);

// This makes the timer go
setInterval(timerStore.tick, 100);

现在在组件中使用裸存储没有问题： …

这是我第一次面对这个警告信息.

无法在尚未装入的组件上调用setState.

具体情况如下:

这是一个无操作,但它可能表示您的应用程序中存在错误.相反,this.state直接指定或state = {};在MyComponent组件中定义具有所需状态的类属性.

" 尚未安装 "部分实际上几乎没有意义,因为触发问题的唯一方法是通过单击需要安装的组件中的按钮来调用函数以查看按钮.该组件在任何给定时间都没有卸载.

这个虚拟组件在我的应用程序中重现错误:

import PropTypes from 'prop-types'
import React from 'react'

export default class MyComponent extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      initial: 'state'
    }
    this.clickMe = this.clickMe.bind(this)
  }

  clickMe () {
    this.setState({
      some: 'new state'
    })
  }

  render () {
    return (
      <div>
        <button onClick={this.clickMe}>click</button>
      </div>
    )
  }
}

我在用:

"react": "16.3.2",
"react-dom": "16.3.2",
"mobx": "4.2.0",
"mobx-react": "5.1.2",

我在最新的React/mobx版本中遗漏了什么吗？(注意组件不使用任何与mobx相关的东西,但它的父级是一个mobx-react观察者)

编辑:

一定有什么相关的组件实例,进一步的调查表明,在某些情况下,创建渲染功能内的处理程序将使该警告消失,但不是在所有情况下.

class MyComponent extends React.component …

我正在使用带有 mobx 的 react js 并从 api 获取数据。我得到的数据是对象数组。当我将数据设置为 mobx 变量时，我会看到代理对象数组（不确定代理说什么）。我只是想将从 api 获得的对象数组设置为 mobx 变量。

我的商店

class UserStore {
@persist @observable token = null
@observable tasks = []
@observable done = false

@persist @observable email = ''

constructor() {

}
@action
getTasks = async () => {
    try {
        let response = await Api.getTasks()
        console.log('getTasks',response.tasks)
        this.tasks = response.tasks
        console.log('my new tasks',this.tasks)

    } catch (e) {
        console.log(e)
    }
}

正如您在第一个块（'black'）中看到的那样，我从 api 获取数据，然后我将 respnse.tasks 设置为 this.tasks。

 this.tasks = response.tasks
  console.log('my new tasks',this.tasks)

我收到以下错误:如果您要从Babylon/Babel 6迁移或想要使用旧的装饰器提议,则应使用'decorators-legacy'插件而不是'decorators'.

的package.json

"@babel/plugin-proposal-decorators": {
      "version": "7.1.2",
      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.1.2.tgz",
      "integrity": "sha512-YooynBO6PmBgHvAd0fl5e5Tq/a0pEC6RqF62ouafme8FzdIVH41Mz/u1dn8fFVm4jzEJ+g/MsOxouwybJPuP8Q==",
      "requires": {
        "@babel/helper-plugin-utils": "^7.0.0",
        "@babel/helper-replace-supers": "^7.1.0",
        "@babel/helper-split-export-declaration": "^7.0.0",
        "@babel/plugin-syntax-decorators": "^7.1.0"
      }
    },

 "@babel/plugin-syntax-decorators": {
      "version": "7.1.0",
      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.1.0.tgz",
      "integrity": "sha512-uQvRSbgQ0nQg3jsmIixXXDCgSpkBolJ9X7NYThMKCcjvE8dN2uWJUzTUNNAeuKOjARTd+wUQV0ztXpgunZYKzQ==",
      "requires": {
        "@babel/helper-plugin-utils": "^7.0.0"
      }
    },

"babel-plugin-syntax-decorators": {
      "version": "6.13.0",
      "resolved": "http://registry.npmjs.org/babel-plugin-syntax-decorators/-/babel-plugin-syntax-decorators-6.13.0.tgz",
      "integrity": "sha1-MSVjtNvePMgGzuPkFszurd0RrAs=",
      "dev": true
    },
    "babel-plugin-transform-decorators-legacy": {
      "version": "1.3.5",
      "resolved": "https://registry.npmjs.org/babel-plugin-transform-decorators-legacy/-/babel-plugin-transform-decorators-legacy-1.3.5.tgz",
      "integrity": "sha512-jYHwjzRXRelYQ1uGm353zNzf3QmtdCfvJbuYTZ4gKveK7M9H1fs3a5AKdY1JUDl0z97E30ukORW1dzhWvsabtA==",
      "dev": true,
      "requires": {
        "babel-plugin-syntax-decorators": "^6.1.18",
        "babel-runtime": "^6.2.0",
        "babel-template": "^6.3.0"
      }
    },
"requires": {
     "@babel/plugin-proposal-decorators": "7.1.2",
}

tsconfig.json

{
    "compilerOptions": {
        "experimentalDecorators": true,
        "allowJs": …

我正在使用mobx并react在Web应用程序中,我想找到一种方法将mobx存储状态传递给无状态组件.以下是我当前的组件源代码:

import React from 'react';
import Panel from './Panel';
import {inject, observer} from 'mobx-react';

@inject(allStores => ({
  form: allStores.store.form,
}))
@observer
export default class Creator extends React.Component {

  connect() {
    console.log(this.props.form);
  };

  render() {
    return (
      <Panel form={this.props.form} connect={this.connect.bind(this)}/>
    );
  }
};

如何将其更改为无状态？我尝试下面的代码,但没有工作:

const Creator = ({form}) => {

  const connect = ()=>{
    console.log('xxxx,', form);
  }

  return (
    <Panel form={form} connect={connect}/>
  );
}

export default observer(Creator);

当我运行上面的代码时,我获得了该方法的undefined价值.如何将商店注入无状态组件？我尝试在无状态组件之上使用,但是语法错误.formconnect@inject

我试图让 MobX 在反应中使用功能组件。我想这样做而不必使用装饰器。我已经使用 create-react-app 设置了一个应用程序，添加了 MobX 和 MobX-react 作为依赖项。但是，我似乎无法在功能组件中使用 observable。

import React from 'react';
import { extendObservable } from 'mobx';
import { observer } from 'mobx-react';

const Test = () => {
    extendObservable(this, {
        button: false
    });

    const handleB1 = () => {
        this.button = false;
    }

    const handleB2 = () => {
        this.button = true;
    }

    const getButton2 = () => {
        console.log('button2');
        return (
            <button type="button" onClick={handleB2}>Button 2</button>
        );
    };

    const getButton1 = () => {
        console.log('button1');
        return …

我是 React 新手，当我阅读文档时，我发现有两种方法来实现 React 组件，基于函数和基于类。我知道在 React 16.8 之前不可能管理功能组件中的状态，但在那之后有了 React Hooks。

问题是，React Hooks 似乎有一个限制，它们只能在功能组件内部使用。以服务器-客户端为例，isAuthenticated当收到401时需要改变状态。

//client.js
import { useUserDispatch, signOut } from "auth";

export function request(url, args) {
  var dispatch = useUserDispatch();
  return fetch(url, args).then(response => {
  if (response.status === 401) {
    logout(dispatch);
  }
}
);

//auth.js
import React from "react";

var UserStateContext = React.createContext();
var UserDispatchContext = React.createContext();

function userReducer(state, action) {
  ...
}

function UserProvider({ children }) {
  var [state, dispatch] = React.useReducer(userReducer, {
    isAuthenticated: false,
  });

  return …

试图基本上完成这个https://github.com/elgerlambert/redux-localstorage,它适用于Redux但是为Mobx执行.并且最好想使用sessionStorage.有一个简单的方法来实现这个最小的样板吗？

我一直在使用MobX和Redux大约6个月.我发现在大多数应用程序中我更喜欢MobX的简单性.但是,我喜欢Redux的单店概念.我听到其他人评论他们用MobX创建了一个故事,我正试图确定最好的方法.目前,我创建了多个商店,然后将它们导入到单个商店中.

class UiStore {
  @observable uiData;

  constructor() {
    this.uiData = {}
  }

  @action updateUI = (data) => {
    this.uiData = {
      data: data
    };
  }
}

let uiStore = new UiStore();
export default uiStore;

class Store {
  @observable currentUser;

  constructor() {
    this.auth = authStore;
    this.ui = uiStore;
  }

}

let store = new store();
export default store;

在这里,我基本上创建了单独的商店,然后将它们合并到一个商店中,类似于redux减速器的工作原理.

还有其他/更好的方法吗？我想过可能会将一个商店导入到不同的文件中,并将一些方法和数据放在一个类上prototype.