标签: mobx

使用Next.js - 构建这个

我将我的应用程序移植到nextjs框架.目前,我正在重新创建身份验证系统,否则我的应用程序的这个迭代是非常简单的.突然,在添加我的受保护路线(高阶组件)后 - 不确定是否相关 - 我开始得到这个错误以及超级笨重的加载(显然).

The connection to http://localhost:3000/_next/webpack-hmr was interrupted while the page was loading.

否则一切都按预期工作.

我不知道如何开始解决这类问题.有没有人对我如何获得有关此问题的更多信息/见解有任何想法？如何调试指导？我的下一步行动是开始断开连接,直到它消失为止.任何帮助,将不胜感激!谢谢

我已经阅读了关于这个主题的各种网站，但我还没有弄清楚为什么我们需要这种runInAction方法以及它究竟是如何工作的。

有人可以向我解释runInAction功能吗？

谢谢。

让我们在React和React Router的应用程序中使用这样的类.

@observer class Module1 extends React.Component {

  constructor (props) {
    super(props);
    //...
  }

  componentWillMount(){
    //...
  }

  method(){
    //...
  }

  otherMethod(){
    //...
  }

  render() {
    return (
       <ChildComp bars={this.props.bars}/>}
    );
  }
}

让我们采取这样的状态

state = observable({
  module1:{
    bars:{
      //...
    }
  },
  module2:{
    foos:{
      //...
    }
  }
})

Module1组件加载如下:

//index.js
render(
      <Router history={browserHistory}>
        <Route path="/" component={App}>
          <Route path='/map' component={Module1} >
            <Route path="/entity/:id" component={SubModule}/>
          </Route>
          <Route path='/map' component={Module2} >
        </Route>
      </Router>,
      document.getElementById('render-target')
    );

我怎么能把道具传递module1.bars给Module1组件？在终极版我会用<provider>和redux-connect,但我有点在Mobx.js.本丢失

所以我用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)

我正在使用MobX 2.2.2尝试在异步操作中改变状态.我将MobX的useStrict设置为true.

@action someAsyncFunction(args) {
  fetch(`http://localhost:8080/some_url`, {
    method: 'POST',
    body: {
      args
    }
  })
  .then(res => res.json())
  .then(json => this.someStateProperty = json)
  .catch(error => {
    throw new Error(error)
  });
}

我明白了:

Error: Error: [mobx] Invariant failed: It is not allowed to create or change state outside an `action` when MobX is in strict mode. Wrap the current method in `action` if this state change is intended

我是否需要将@action装饰器提供给第二个.then语句？任何帮助,将不胜感激.

我正在使用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

我已经将我的RN应用程序从使用Babel 7的0.55.4升级到0.56.

在0.55.4中使用装饰器用于MOBX我使用"babel-plugin-transform-decorators-legacy"但与Babel 7不兼容......

react-native ver:0.56.0 mobx ver:5.0.3 mobx-react ver:5.2.3

有没有人有解决方案？

谢谢

更新:

该应用程序适用DEBUG于此配置

的package.json

...
"devDependencies": {
    "@babel/core": "7.0.0-beta.47",
    "@babel/plugin-proposal-decorators": "7.0.0-beta.47"
    ...
}

.babelrc

{
  "presets": [
    ["react-native"]
  ],
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }]
  ]
}

但在RELEASExCode崩溃时出现此错误:

babelHelpers.applyDecoratedDescriptor is not a function.

更新2,工作配置:

这是我的工作配置:

的package.json

...
"devDependencies": {
   "@babel/core": "7.0.0-beta.47",
   "@babel/plugin-proposal-decorators": "7.0.0-beta.47",
   "@babel/runtime": "7.0.0-beta.47",
   "babel-jest": "23.2.0",
   "babel-preset-react-native": "5.0.2",
   "jest": "23.3.0",
   "react-test-renderer": "16.4.1"
}
...

.babelrc

{
  "presets": [
    ["react-native"]
  ],
  "plugins": [
    ["@babel/plugin-proposal-decorators", …