在使用Mobx时，如何解决` `reaction is not defined` `？
在使用Mobx时，如果遇到reaction is not defined的错误，可以按照以下步骤解决：
- 确保已正确安装和引入Mobx库：首先，确保已经通过npm或yarn等包管理工具安装了Mobx库。然后，在需要使用Mobx的文件中，使用
import { reaction } from 'mobx'语句引入reaction函数。 - 检查Mobx版本兼容性：如果使用的是较新版本的Mobx，可能会有一些API的变动。请确保你的代码与所使用的Mobx版本兼容。可以查阅Mobx的官方文档或GitHub仓库，了解当前版本的API使用方式。
- 检查代码中的拼写错误：检查代码中是否存在拼写错误，特别是在使用
reaction函数的地方。确保函数名拼写正确，且没有额外的空格或特殊字符。 - 确保在正确的上下文中使用
reaction函数：reaction函数需要在正确的上下文中调用。通常，它应该在Mobx的autorun或reaction函数中使用。确保在正确的地方调用reaction函数，并传入正确的参数。 - 检查是否正确引入Mobx的相关依赖：Mobx可能依赖其他库或插件。请确保已正确引入这些依赖，并按照官方文档的要求进行配置。
如果以上步骤都没有解决问题，可以尝试以下方法：
- 清除缓存并重新安装依赖：使用包管理工具清除缓存，并重新安装所有依赖项。
- 更新Mobx版本：尝试更新Mobx到最新版本，以获取最新的修复和功能。
- 检查相关文档和社区：查阅Mobx的官方文档、GitHub仓库、Stack Overflow等社区，寻找类似问题的解决方案或者提问求助。
腾讯云相关产品和产品介绍链接地址：
相关·内容
1回答
如何对数组中的变化作出反应？
var todos = mobx.observable([
{
title: "Make Pasta",
subtasks: [
{ title: 'Pasta' }, { title: 'Salt' },
]
},
{
title: "Make coffee",
subtasks: [
{ title: 'Hot Water
浏览 1提问于2017-06-07得票数 1
回答已采纳
我是React和Mobx的新手，正在关注一个在线教程。 教程建议使用reaction，例如： reaction(() => list.totalPrice, () => changed++) 但我只得到了错误ReferenceError: reaction is not defined。 我不确定这意味着什么，也不知道如何让它工作(在Google上找不到任何关于它的东西)。 根据Mobx文档，我似乎正确地使用了它https://mobx.js.org/refguide/reaction.html 有人知道这是什么意思吗？ 我的完整代码是： import { getSnapshot
浏览 40提问于2020-04-15得票数 0
回答已采纳
Mobx/Mobx状态是不可观察的！
const { observable, when, reaction, intercept, observe, isObservable } = mobx;
const { fromPromise, whenWithTimeout } = mobxUtils;
const promise = fetch('https://jsonplaceholder.typicode.com/todos')
.then(res => res.json())
const result = fromPromise(promise);
con
浏览 1提问于2017-05-24得票数 1
回答已采纳
我试图遵循的指南，这导致了一个
mobx.esm.js?4fd9:2362 [mobx] Encountered an uncaught exception that was thrown by a reaction or observer component, in: 'Reaction[MainView.update()]' TypeError: Expected "item" to be a string
我的配置是
path: 'item/:item',
component: 'item-view',
有没有一个例子，如何
浏览 47提问于2021-05-30得票数 2
回答已采纳
我最近开始使用MobX，偶然发现了reaction的概念。我把reactions理解为运行副作用的函数。副作用是什么，由我来决定。我使用reaction来更新我的MobX状态。如果你检查我下面的代码，我有一个项目(配料)的状态。我想做的是从我的localStorage (getIngredients函数)中加载成分，并将它们显示在我的React中。到目前一切尚好。然后，每当我更新配料(更改名称、价格、重量-可通过表单进行编辑)时，我希望将此更改存储在localStorage (putIngredient函数)中，然后相应地更新我的@observable ingredients (因此，稍后当我
浏览 327提问于2020-03-05得票数 0
var obj = mobx.observable({ arr: [{}, {}, {}] });
mobx.reaction(() => obj.arr.map(x => x.foo), (newValue) => {
console.log(newValue);
});
var trigger = mobx.observable({ flag: false });
mobx.reaction(() => trigger.flag, newValue => {
obj.arr.forEach((x, i) => { x.foo =
浏览 2提问于2020-07-22得票数 0
我试图在Mobx/React应用程序中使用mobx-utils中的createViewModel。
我的商店是：
export class CompanyStore extends StoreExt {
@observable
companyDetails: ICompanyDetails = {}
}
当我在组件中使用'createViewModel‘函数时，如下所示：
function CompanyDetails() {
const { companyStore } = useRootStore()
const test = createViewMo
浏览 2提问于2020-10-29得票数 0
class FilterCriteria {
@observable filter = new Map();
}
let criteria = new FilterCriteria ();
// setting up a reaction when something in the filter changes
// (property added, removed, or changed)
reaction(()=>criteria.filter, data => console.log(data.toJSON()));
criteria.filter.set(&#
浏览 2提问于2019-02-06得票数 3
1回答
我正在尝试使用MobX来创建一个奥泰罗游戏。所以我的反应是寻找磁贴的变化，然后相应地更新其他磁贴。
因此，在下面的代码中，我运行bumpRandom()来更改另一个磁贴以查看效果。但是这会进入循环函数，因为reaction总是在运行。如何让它在reaction中停止观察？
class OtelloBoard {
@observable cells = [];
constructor() {
for (i = 0; i< SIZE*SIZE; i++) {
this.cells.push(new Cell())
}
reaction(
浏览 0提问于2016-09-01得票数 0
回答已采纳
1回答
我有一个简单的组件，它呈现空，但应该显示iOS/Android警报时，从通知存储的shown属性被更改为真，它只工作一次使用autorun /反应/当从mobx，我可以通过spy看到hideNotification也被正确触发，将shown设置回假，但我不能再重新触发警报。
组件
import { Component } from "react";
import { observer, inject } from "mobx-react/native";
import { reaction } from "mobx";
import { Aler
浏览 5提问于2017-07-12得票数 1
回答已采纳
这是我的简化商店：
export class ProfileStore {
profile = {
id: 1,
name: "Tommy",
todos: [
{
value: "Clean the room",
done: false
}
]
};
constructor() {
makeObservable(this, {
profile: observable,
});
}
}
我的目标是听每一个可能的变化，在“档案”内可
浏览 6提问于2021-09-08得票数 2
回答已采纳
使用Mobx，在更新存储(即单击按钮)后，组件不会重新渲染。我已经安装了mobx devtools，它在初始加载后没有显示任何内容，控制台中也没有错误。你知道我做错了什么吗？
Store.js：
import { observable } from 'mobx';
class Store {
@observable me;
constructor() {
this.me = 'hello';
}
change_me(){
this.me = 'test 1234';
浏览 1提问于2016-11-20得票数 11
在更新了flutter_mobx：^2.0.6+1和mobx_codegen：^2.0.7之后，ReactionDisposer没有认识到枚举的变化
late ReactionDisposer _refreshDisposer;
Completer<dynamic> refreshCompleter = new Completer();
@override
void initState() {
super.initState();
_refreshDisposer = reaction((_) => _vendorStore.serviceState
浏览 6提问于2022-08-12得票数 1
回答已采纳
这是我的店：
import { observable, action, flow, reaction } from "mobx";
export default class Demo {
@observable obj = {
flag: false,
name: "",
age: 20
};
@action
turnFlag = () => {
this.obj.flag = true;
};
constructor() {
reaction(
() => this.
浏览 0提问于2018-11-26得票数 1
回答已采纳
如何检查mobx observable是否有订阅者？或者观察者获取订阅者时如何获取事件？
例如，我有一些方法：fetchData()和一些变量：@observable responseData，并且我希望只有当responseData有订阅者(像@reaction或@autorun这样的消费者)时才运行fetchData()。
如果有一个isObservableHasSubscribers(observableVar);方法就好了
完整代码示例(堆栈: Angular和Mobx)：
SomeStore {
@observable responseData;
fetchData
浏览 13提问于2018-01-14得票数 1
回答已采纳
我在React和Three.js中使用mobX。在React组件中渲染Three.js场景。我使用mobX存储在普通React组件和3D场景中呈现的信息(这不是一个图形或React问题)。
为了在mobX存储中发生相关更改时更新ThreeJS场景，我有一个自定义反应：
import { reaction } from 'mobx';
import { observer, inject } from 'mobx-react';
// ...
@inject('matchStore')
@observer
class MapViewport ext
浏览 20提问于2019-08-02得票数 0
回答已采纳
在MobX with receipe中，在部分有一个接收程序来响应useEffect钩子中的更改。
import React from 'react'
import { autorun } from 'mobx'
function useDocumentTitle(store: TStore) {
React.useEffect(
() =>
autorun(() => {
document.title = `${store.title} - ${store.sectionName}`
}),
浏览 16提问于2019-10-09得票数 6
1回答
因此，要检查是否有互联网连接，我们可以使用window.navigator.onLine，如果是真的，它意味着互联网是连接的，虚假的手段是互联网断开。
这是我的尝试，让MobX自动发现这个，并将相应的消息记录在控制台上。当通过日志记录'internet connected'连接到internet时，它在负载上工作，但是，一旦我断开了与internet的连接，它就不会对相应的消息'internet disconnected'进行记录。
const { observable, reaction } = mobx;
class NetStore {
co
浏览 2提问于2018-06-14得票数 2
回答已采纳
2回答
MobX异步反应
、、、
嗨，我在商店中使用MobX，当计算值发生变化时，我需要有一个异步反应：
class Store {
@observable user;
@observable something;
@computed get firstParam () {
return this.user && this.user.params[0];
}
async loadSomething () {
reaction(
() => this.firstParam,
浏览 0提问于2016-08-19得票数 5
回答已采纳
我有两个商店，第二个商店应该根据第一个商店的更新进行更新。第一个商店：
import {decorate} from 'mobx';
export class EntryStore {
constructor (parent_store) {
this.parent_store = parent_store;
this.entries = [];
console.log('----------------------');
setTimeout(() => this.entries.p
浏览 0提问于2018-11-29得票数 0
如我们所知，如果在小部件构建期间使用setState，它将出错：
flutter: [extra#0] bound_extra.0 => FlutterError.onError raw stackTrace=#0 Element.markNeedsBuild.<anonymous closure> (package:flutter/src/widgets/framework.dart:4424:11)
flutter: #1 Element.markNeedsBuild (package:flutter/src/widgets/framework.dar
浏览 8提问于2022-03-06得票数 0
1回答
自动运行和reaction必须在构造函数内才能工作吗？我可以在没有构造函数的情况下编写这个简单的示例吗？
另外，我在自动运行中的代码正常运行，但是如果我将它更改为console.log(this.expenses)，它就不能工作。为什么会这样呢？
import { observable, action, computed, useStrict, autorun, reaction } from 'mobx'
useStrict(true)
class ExpensesStore {
@observable.shallow expenses = []
@action
浏览 1提问于2017-10-19得票数 3
回答已采纳
我有“注册”和“登录”路由器。
我可以使用按钮从“注册”路由器移动到“登录”路由器。
因此，当我在“登录”处输入一些信息并移动到“注册”时
并返回到“登录”，输入的数据被留在商店。
所以我创建了"componentwillunmount“来在卸载时初始化存储数据。
但是，像autorun或reaction这样使用mobx的还有其他方式吗？不使用"componentwillUnmount“
你能给我其他人的概念或例子吗？
非常感谢。
浏览 2提问于2019-03-19得票数 0
我正在使用mobx包在颤振上。(均为最新稳定版本)
我试图使用ObservableList，的reaction列出只调用一次reaction的更新，因为接下来调用时，新值和旧值是相等的，我不明白为什么。代码的所有其他部分都按预期运行。
示例代码：
abstract class _TesteControllerBase with Store {
_TesteControllerBase() {
reaction((_) => list, (list) {
// print(list.length);
}, equals: (newValue, oldValu
浏览 2提问于2020-04-17得票数 1
回答已采纳
1回答
重构破坏了初始状态
、、、
使用MobX的React (从create-react-app)。使用axios进行异步后端API调用。
这段代码可以工作。初始状态(问题数组)被填充，并且呈现该组件的网页使用来自状态的初始内容来呈现。
import { observable, computed, autorun, reaction } from 'mobx'
import axios from 'axios'
class IssuesStore {
@observable issues = []
constructor() {
autorun(() => consol
浏览 20提问于2017-08-26得票数 0
回答已采纳
是一种经常与React一起使用的状态管理工具。我正在使用介绍页面底部提供的 链接，试图了解MobX工具是如何工作的。
JSfiddle在第一次加载时工作正常。更改一个字节的代码，点击JSfiddle的运行按钮，它就会崩溃。我正在尝试理解JSFiddle崩溃以及如何修复它。
在第一次加载时，我确实看到一个控制台警告
VM48 babel.js:60934 You are using the in-browser Babel transformer.
Be sure to precompile your scripts for production - https://babeljs.io/do
浏览 0提问于2017-10-29得票数 0
我有一篇文章，它是mobx状态树对象，我正在使用它在一个react应用程序中。
这是我树里的一个动作
setId(id: string) {
self.id = id
this.updateProduct()
},
以及这件事
<input
value={comp.productId}
onChange={(e) => comp.setId(e.target.value)}
/>
问题是，this.updateProduct()在每次更改时都会运行，并在每个键按下之后进行异步调用。
我想利用mobx的反应，并使用类似的方法
reaction(
() =&g
浏览 1提问于2019-03-14得票数 2
回答已采纳
我正在尝试揭穿方法调用："chart.calculateChartData(props.answers)“。 我尝试过：- autorun - reaction - use-debounce from a react lib。- calculateChartData中的setTimeout 每种解决方案都会导致更新周期，或者不起作用，因为MobX不是不可变的。 有谁能给点提示吗？ function QuantificationChart(props: QuantificationChartProps) {
const {t} = useTranslation();
浏览 21提问于2020-04-02得票数 0
回答已采纳
我一直在开发一款基于聊天室的游戏《不和谐》，使用机器人。我想在同一个齿轮上使用两个机器人，因为齿轮内的功能在这些机器人之间共享。但是，核心函数仍然在主bot文件中，因为这两个bot的核心函数是不同的。我尝试了许多搜索查询，但我找不到任何关于从主文件调用函数的内容。通常我会使用await function(argument)，但这给了我name 'function' is not defined。
主文件如下所示：
async def gen():
item = random.randint(10000000, 99999999)
return item
@bo
浏览 0提问于2021-05-03得票数 1
我对React和整个古巴都是相当陌生的。
我似乎无法让的FileUpload组件工作。我不知道我做错了什么。
我总是得到以下错误：
Uncaught TypeError: Cannot read property 'getFileUploadURL' of undefined
at FileUploadComponent.render (index.esm.js:362)
at allowStateChanges (mobx.module.js:1146)
at index.module.js:951
at trackDerivedFunctio
浏览 7提问于2020-07-27得票数 0
我正在尝试用我自己的带有useContext钩子的功能React组件包装FullCalendar React组件，以访问MobX存储(我最终可能会在其他组件中使用该存储)和observer()，以使其对存储中的更改做出反应。我的组件如我所期望的那样做出反应，但在更改后使FullCalendar组件呈现时遇到了问题。 我试着找到一个解决方案，用<Observer>包装<FullCalendar>，使用autorun()和reaction()，但都不起作用。我一定是漏掉了什么 到目前为止，这个沙盒https://codesandbox.io/s/mobx-fullcale
浏览 14提问于2019-10-02得票数 0
回答已采纳
我正在开发一个Mobx应用程序，当我浏览到/login页面时，当我登录时，它会给我提供这些错误。
首先，我的代码：
index.tsx
import 'semantic-ui-css/semantic.min.css';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import createBrowserHistory from 'history/createBrowserHistory';
import { Router } fro
浏览 0提问于2018-02-09得票数 1
回答已采纳
Mobx文档说使用pattern useEffect(reaction(..))来跟踪可观察到的变化，这在我看来就像是杂交繁殖。使用react依赖数组来实现这一点有什么问题？我做了一个基本的测试，它像预期的那样工作： const Hello = observer(() => {
const {
participantStore: { audioDisabled },
} = useStores();
useEffect(() => {
console.log('changed', audioDisabled);
}, [audioD
浏览 50提问于2021-07-23得票数 0
回答已采纳
1回答
我有一个组件并注入了一个商店实例：
import React from "react";
import { inject, observer } from "mobx-react";
import Retention from "./Retention";
@inject(() => {
return {
retentionStore: new Retention()
};
})
@observer
export default class RetentionChart extends React.Component {
浏览 0提问于2018-12-11得票数 0
回答已采纳
我想将它们排除在包之外，这样浏览器就可以缓存它们。我尝试过这个和一些变体，但在webpack.config.js中没有成功。反应和反应--工作很好。
externals: {
"react": "React",
"react-dom": "ReactDOM",
'mobx': "observable",
'mobx-react': "observer"
},
我要把他们带进我的index.html
<script src="
浏览 5提问于2016-11-22得票数 1
回答已采纳
我在React组件中映射一个ObservableArray，它运行得非常好，但是每当我在它下面添加OnClick事件处理程序时，它就会中断，引发一些错误。将处理程序添加到映射循环之外的组件中，将按预期工作。有什么建议吗？
反应组分
@observer
export default class GroupsTable extends React.Component<Props, void> {
constructor() {
super();
//...
}
private renderRows(groups) {
return groups.
浏览 2提问于2017-01-26得票数 1
回答已采纳
1回答
我正在用MVC模式和mobx为应用程序状态管理构建一个购物应用程序。
目前，我有一个mobx商店的购物车项目和一个商店的手推车控制器。
cart控制器有一个购物车项的ObservableList，问题是我不知道是否有一种方法可以观察购物车条目上的变化。
例如，我想观察cartItem.title或cartItem.total。
有什么方法可以用ObservableList跟踪吗？可观察列表的.observe()方法是什么？(认为文件对我来说不清楚)
更新:示例代码
就像我说的那样，我要买一瓶肥皂，一瓶是买手推车的，另一种是买手推车。
购物车商店中的：
import 'package:m
浏览 1提问于2020-04-30得票数 1
2回答
我在Mobx中相对较新，当这个可观察到的数组被更新时，我需要自动调用一个函数。可观察的数组：
@observable Todos = []
我有很多函数来管理这个数组(addToso，removeTodo，...)我希望避免在更新此数组的每个函数中调用此函数。
例如：
@action addTodo(todo, important) {
const newTodo = {
id : Math.random(),
text : todo,
isImportant : important,
completed : false,
date : Date.now(
浏览 32提问于2018-05-28得票数 2
我们在一个项目中使用，我看到代码中经常使用asFlat和asReference。根据我的理解，只有当引用被更改时，asReference才会触发更改，而不是当对象上的任何属性发生更改时。相反，Mobx将跟踪标记为observable的对象的所有属性(考虑到这些属性是在对象创建期间出现的)。但在下面的代码中，我没有看到两种行为之间的任何变化。
类似地，asFlat允许属性本身是可观察的，而不是它的任何子属性。这意味着向标记为asFlat的数组添加新值不会触发更改，但更改数组的引用将触发更改。但是，在下面的代码中，两个数组的行为完全相同。为什么会发生这种情况？
另外，asReference和asF
浏览 2提问于2017-11-28得票数 2
1回答
单张-在单击事件时覆盖图层
、、、、
我有一个mobx反应，它有条件地将layer.on({click})函数映射到一个图层组。
reaction(
() => this.managingDates,
() => {
if (this.managingDates) {
this.mapStore.polygonLayer.eachLayer(layer => {
layer.on({
click: e => {
this.mapStore.setManagedPar
浏览 0提问于2017-09-18得票数 1
我正在学习lynda.com课程，这是我掌握的代码
import firebase from 'firebase'
import MobxFirebaseStore from 'mobx-firebase-store'
const config = {
// I pasted the info from google firebase here
}
export default class SettingsStore extends MobxFirebaseStore {
constructor() {
firebase.
浏览 18提问于2017-02-01得票数 3
回答已采纳
1回答
我正在尝试使用mobx建立一个用于状态管理的React应用程序。
我定义了一个这样的商店：
ApplicationStore.js
import { observable, action, reaction } from 'mobx';
class ApplicationStore {
@observable appName = 'App';
@observable currentRoute = '/';
@observable appLoaded = false;
@action setAppLoaded() {
浏览 0提问于2018-11-30得票数 0
我喜欢MobX。我想在原生JavaScript中使用它。我尝试添加CDN ，然后尝试使用MobX语法编写类：
class MyStore {
@observable data = 'foo'
}
const myStore = new MyStore();
但是我得到了错误：
SyntaxError: illegal character
对于@和：
ReferenceError: exports is not defined
从mobx.js文件内部。
因此，没有React和Blunding/Transpiler，这似乎是不可能的，不是吗？如果不是，还有其他选择吗？
谢谢!
浏览 2提问于2018-04-26得票数 4
2回答
我有一个异步功能，它应该添加反应到列表中，直到某个反应被按下，然后它将添加所有适当的角色。为此，我有一个全局变量"reactions = []“，当按下"ok”反应时，该变量将被重置。VS代码在"for react in reactions:“行上告诉我："reactions is used before it is defined. Move the definition before.”这很令人困惑，因为roleEmojis是另一个全局变量，但它工作得很好。下面是我的代码：
import os
import discord
import time
from
浏览 29提问于2020-05-31得票数 2
回答已采纳
1回答
，例如
有一家商店：
const DataStore = observable({
data: [],
getDataAction() {}
})
还有其他的商店。
所有这些都用于：
injectStores({ store, storeY })
为了MobX DevToolsPro的工作。
官方文档说，您可以使用方法：
autorun()
reaction()
when()
所有的例子都给出了类。如果我理解得对，你只能听一听变化。
例如，如果
data != []
你可以打电话给
console.log("data is not empty")
或者你想要的任何东
浏览 4提问于2022-06-13得票数 1
我是一个JS/React/MobX/else新手，试图做一些非常简单的事情，但没有成功。
我想要的是-2个按钮，一旦点击，显示相应的选项卡在一个模式，使用反应-引导和mobx。
但是我不断地发现这个错误：
mobx遇到了一个由反应或观察者组件引发的未察觉的异常：'ReactionAuthModal#0.render()错误: mobx不变失败:此时不允许像更改状态这样的副作用。您是否试图从例如reaction组件的呈现函数中修改状态?尝试修改: AuthModalStore@3.tab
请帮帮忙。非常感谢。
商店代码：
import { observable } from 'm
浏览 4提问于2017-02-11得票数 0
1回答
我是编程新手，我必须用常微分方程(ODE)创建一个matlab图形用户界面代码，然后用图形表示方程。我遇到的问题是，ode的函数在一个.m文件中定义，并在另一个.m文件中调用，如下所示：
% First part
% This is the ode .m file
function dydt=project(t,y)
dydt=zeros(3,1);
y(1);
y(2);
y(3);
dydt(1) = (some math);
dydt(2) = (some math);
dydt(3) = (some math);
end
% Second part
% This is
浏览 0提问于2013-04-17得票数 0
回答已采纳
1回答
在我的应用程序的一个特性中，我与Firebase同步以获得活动事件的列表。这一结果的主要结果是，可观测到的信息将被实时地反复设置。这是伟大的，但它已经导致了一些MobX的麻烦。要演示，请看一看相关的商店：
import { observable, computed, autorun, extendObservable, reaction } from "mobx";
import { subscribe } from "./firebase";
class HomeStore {
@observable activeEvents = {};
浏览 1提问于2017-04-10得票数 0
我试图对我的机器人自己的信息做出反应。但不起作用。
if args[0] == "solido":
reaction = ""
sent = await ctx.message.channel.send(client.get_channel("795387716967333889"), embed=embed)
# await message.add_reaction(sent, emoji = "\U0001F44D")
await ctx.message.a
浏览 3提问于2021-01-09得票数 0
回答已采纳
我使用的是MobX @观察者和@with路由器(ReactiveRouter-v4)包装页面组件，如下所示
@withRouter
@inject('stores')
@observer
class Page extends Component {
render() {
return (
<div>
<NavBar />
<Header title={this.props.stores.UIStore.title} />
<Switch>
浏览 8提问于2017-07-07得票数 3
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
