mobx_编程技术问答社区_程序员问答知识库

以下是关于 mobx 的编程技术问答

mobx docs 告诉我，我必须"使用"变换插件变换式"符号 - 并确保它首先在插件列表中"，以便装饰器工作. MOBX样板项目建议我需要一个.babelrc喜欢: { "presets": [ "react", "es2015", "stage-1" ], "plugins": ["transform-decorators-legacy", "react-hot-loader/babel"] } 如何使用Create-React-App生成的项目来做到这一点?任何尝试使用@装饰器错误的尝试.即使在项目"弹出"之后，也没有.babelrc. 解决方案除非您 eject eject 解决方案您无法使用Decorator语法/a>.但是，您可以使用没有@的mobx，因为它只是语法糖. dan Abramov 已经阐明了此我们的位置很简单:我们添加了稳定的变换足够(例如异步/等待)或Facebook大量使用(例如班级

0 2023-12-01 编程技术问答社区 reactjs webpack babeljs mobx

React JS：如何在自定义钩子中使用观察者获得MobX商店的状态？

用例: 我有一个自定义挂钩useFoo，它需要根据商店中的bar属性返回值，但是打字稿会引发错误. 代码: export const useFoo = observer(() => { // typescript throws error --^^^^^^^-- const { bar } = store; return bar ? 'x' : 'y'; }); 打字稿错误: Argument of type '() => "x" | "y"' is not assignable to parameter of type 'IReactComponent'. Type '() => "x" | "y"' is not assignable to type 'FunctionComponent'. Type '"x" | "y"' is not assignable to type 'ReactElement

0 2023-11-11 编程技术问答社区 reactjs typescript redux react-hooks mobx

React Hooks Mobx：无效的钩子调用。钩子只能在一个函数组件的主体内调用。

我正在使用React Hooks，当我将组件与MOBX的Observer包裹时，我会遇到此错误.有什么问题?是否可以将MOBX与React挂钩使用? import classnames from 'classnames'; import { observer } from 'mobx-react'; import React, { useState } from 'react'; import { Link } from 'react-router-dom'; import ViewStore from '../../../store/ViewStore'; interface INavbarProps { viewStore: ViewStore; } const Navbar = observer((props: INavbarProps) => { const { authed } = props.viewStore; const [drawerIsOpen

20 2023-11-11 编程技术问答社区 reactjs typescript mobx react-hooks

是否可以在功能组件之外使用React Hooks，或者我必须使用mobx或redux？

我是新手反应的新手，当我阅读有关文档的信息时，我发现有两种实现REACT组件的方法，即基于功能的和基于班级的组件.我知道在React 16.8之前不可能管理功能组件中的状态，但是此后有React Hooks. 问题是，React钩子似乎有一个限制，它们只能在功能组件中使用.以服务器 - 客户为例，需要更改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 impo

8 2023-11-11 编程技术问答社区 javascript reactjs react-hooks mobx mobx-react

React/Mobx：如何将映射数组中的单个项目传递给另一个组件，并只检索与点击值相关的项目

我有一个API，该API被推入一个名为Positstore的商店；如图所示 const PositionStore = observable({ loading: false, error: "", items: [] as PositionInfo[], LoadPosition() { this.loading = true; this.error = ""; GetPositions() .then(action((json:any) => { this.items = json.items; console.log(json) this.loading = false; })) .catch(action((error: any) => { this.error = error.message; this.loading = false;

6 2023-11-01 编程技术问答社区 javascript reactjs typescript react-router mobx

在Reactjs使用Typescript时出现的'重复的字符串索引签名'错误

我使用typecript在reactjs上制作了一个对象. 下面有一个代码. 但是，它在从密码到最后一个名称的用户信息数据中都导致了此错误. 你能给我一些建议吗? 重复字符串索引签名 import { observable, action } from 'mobx'; export interface ISignStore { email: string, password: string, firstName: string, lastName: string, handleInput(e: any): void, handleSubmit(e: any): void } export class SignStore implements ISignStore { @observable UserInformation: { [email: string]: '', [password: string]: '',

4 2023-11-01 编程技术问答社区 reactjs typescript mobx

没有机会使强类型的对象可以被mobx观察到

我使用mobx库.它与ReactJ非常吻合. 我有这样的可观察的数组: @observable items = []; 当我以这种方式添加一个对象时，我没有问题，并且可以按预期观察给定对象. let x = { Title: "sample title" } items.push(x); 但是，当我定义一个强键入对象(使用Typescript) 时 export class SampleObject { Title: string; constructor(title: string) { this.Title = title; } } 并以这种方式推动新对象，它将无法观察到 items.push(new SampleObject("Sample Title")); 我该如何解决这个问题！? x和y之间有什么区别?！ var x = { Title: "sample" } var y =

6 2023-11-01 编程技术问答社区 javascript typescript observable mobx mobx-react

Mobx没有更新到阵列中的变化

在更新数组时，我很难让MOBX渲染. 这是代码的简化版本: import React, { useState } from 'react' import { flow, makeObservable, observable } from 'mobx' import { observer } from 'mobx-react' import { ResourceList } from './ResourceList' import { ResourceItem } from './ResourceItem' export const View = observer(() => { const [{ items, }] = useState(new MyState()) return }) export class MyState { constr

4 2023-11-01 编程技术问答社区 reactjs typescript mobx

MobX-State-Tree流程中的类型化产量表达

在MOBX-State-Tree(MST)中执行异步动作的推荐方法是使用 flow ，它将生成器函数作为第一个参数，应产生每个诺言. ，但是有什么方法可以在MST中自动键入A屈服表达式? 示例 import { flow, types } from "mobx-state-tree"; type Stuff = { id: string; name: string }; function fetchStuff(): Promise { return new Promise((resolve) => { resolve([ { id: "1", name: "foo" }, { id: "2", name: "bar" } ]); }); } const Thing = types.model({ id: types.identifier, name: types.string }); co

8 2023-11-01 编程技术问答社区 typescript mobx mobx-state-tree

当观察对象发生变化时，mobx观察器突然不重新渲染了

我的应用程序停止更新可观察到的更改，我会疯狂地试图弄清原因.下面的代码仅在屏幕上显示"计数器:5"，即使控制台显示其正在更新.包装的相关部分.json是: 在 { "scripts": { "start": "react-scripts start", "build": "react-scripts build", }, "dependencies": { "mobx": "^6.0.4", "mobx-react": "^7.0.5", "react": "17.0.0", "react-dom": "17.0.0", "react-icons": "^4.1.0", "react-router-dom": "^5.2.0", "typescript": "^4.0.3", }, "devDependencies": { "babel-preset-mobx": "^2.0.0"

4 2023-10-31 编程技术问答社区 javascript reactjs typescript mobx

React Typescript: 类型的参数'{ [x: number]: any; }'不能分配给类型的参数

我在项目中添加了Onchange方法(React，TS，MOBX)，但我遇到了一个错误:Argument of type '{ [x: number]: any; }' is not assignable to parameter of type 我是Typescript的新手，不确定为什么会发生.有什么问题? (parameter) event: { target: { name: any; value: any; }; } 类型'{[x:number]的参数:any; }'不能分配给类型的参数'iadddplayerformstate | ((Prevstate: Readonly，道具:Readonly) => iadddplayerformstate |选择| null)|选择 | null'. import React, { Component } from 'react'; import ViewStor

10 2023-10-31 编程技术问答社区 javascript reactjs typescript mobx

错误： [MobX] 不能将'observable'应用于'Store@user'：没有找到字段

我有一家商店: class Store { user!: User; constructor() { makeObservable(this, { user: observable, setUser: action }); } setUser = (user: User | undefined) => this.user = user; } 我遇到了这个错误: Error: [MobX] Cannot apply 'observable' to 'Store@user': Field not found. User是一个自定义对象，我应该以不同的方式对待他(明智的明智)? 预先感谢！解决方案默认情况下， make(Auto)Observable仅支持已经支持已经已经存在的属性定义，因此您需要定义user在构造函数内部或使其无效:user: User | null = null. 另外，

2 2023-10-31 编程技术问答社区 typescript mobx state-management

当我设置观察者时，mobx-reacter并不启动。

我正在尝试使用MOBX和Typescript创建一个React应用程序.但这行不起作用. 我希望计时器数秒.我看到事件发生并更新计数器.但是该组件不是Rerender.我在做什么错? import React from "react"; import { observable, action } from "mobx"; import { observer, inject, Provider } from "mobx-react"; export class TestStore { @observable timer = 0; @action timerInc = () => { this.timer += 1; }; } interface IPropsTestComp { TestStore?: TestStore; } @inject("TestStore") @observer export class Test

4 2023-10-31 编程技术问答社区 reactjs typescript ecmascript-6 mobx

Next js Error “Warning: Expected server HTML to contain a matching ＜button＞ in ＜div＞“

我有一个暗模式组件，这是太阳和月亮图标之间的简单切换. darkmode.tsx import { observer } from 'mobx-react' import { MoonIcon, SunIcon } from '@heroicons/react/solid' import { useStore } from '@/store/index' export const DarkMode = observer(() => { const { theme, setTheme, isPersisting } = useStore() if (!isPersisting) return null return ( {theme === 'dark' && (

6 2023-10-14 编程技术问答社区 javascript reactjs next.js mobx tailwind-css

通过道具控制SVG填充颜色的反应能力

我有一个SVG，这里称为" example.svg"，被称为组件，像这样: import { ReactComponent as Example } from './example.svg'; import styles from './index.module.css'; const ExampleImg = ({ ...otherProps }) => ( ); export default ExampleImg; 此组件在其他地方称为myPage - 喜欢: const myButton = ; 我的问题是: 我需要能够通过插入可以从SVG外部控制的道具来控制SVG的填充颜色.有问题的SVG:

16 2023-10-05 编程技术问答社区 javascript reactjs svg jsx mobx

反应不被嵌套的观察变量所触发

我有一个可观察的类，带有可观察的适当位: class TodoItem { @observable name: string = ""; @observable completed: boolean = false; @action setCompleted(value: boolean) { this.completed = value; } constructor(name: string) { this.name = name; makeObservable(this); } } class TodoList { @observable todos: TodoItem[] = []; @action addTodo(todo: TodoItem) { this.todos.push(todo); } constructor() { makeObservable(this);

4 2023-09-28 编程技术问答社区 javascript reactjs state mobx mobx-react

在有getter的情况下，使用Mobx makeObservable使setter成为一个动作。

在MOBX中，如果我想使用互助，则需要使用MakeObservable而不是MakeAutooBservable.但是使用MakeObservable需要我命名突变状态的操作，因此我该如何将设置器声明为一个动作，鉴于它具有与Getter相同的名称? 换句话说，我写了setter_for_myvar的何处或达到相同效果的另一种方法是什么? class BaseClass { _myvar = null set myvar(val) { this._myvar = val; } get myvar() { return this._myvar; } other_action() { this._myvar = 5; } constructor() { makeObservable(this, { _myvar: observable, other_action: action,

2 2023-08-31 编程技术问答社区 javascript ecmascript-6 mobx setter es6-class

为一个应用程序创建一个单一的MobX商店的最佳方式是什么？

我已经使用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.

18 2023-08-03 编程技术问答社区 reactjs react-native redux mobx mobx-react

Rebase syncState没有更新Firebase数据

我正在使用mobx + reactjs + firebase + re base 我有我的base.js，例如: import firebase from 'firebase'; import Rebase from 're-base'; import 'firebase/database'; var app = firebase.initializeApp({ apiKey: "xxxxxx", authDomain: "xxxxxx", databaseURL: "xxxxx", projectId: "xxxxxx", storageBucket: "xxxxx", messagingSenderId: "xxxxxx" }); export var db = firebase.database(app); var base = Rebase.createClass(db); export defau

2 2023-08-02 编程技术问答社区 reactjs firebase firebase-realtime-database rebase mobx

React Router + Axios拦截器。如何做重定向？

我有一个Axios Interceptors，当用户被迫登录时(由于代币已过期)，我想返回我的主页. 我不确定如何将React路由器传递给它.我正在使用MOBX，但不确定这是否会对我解决这个问题. export const axiosInstance = axios.create({ baseURL: 'https://localhost:44391/api', timeout: 5000, contentType: "application/json", Authorization: getAuthToken() }) axiosInstance.interceptors.response.use(function (response) { return response; }, function (error) { const originalRequest = error.config; if(err

58 2023-08-01 编程技术问答社区 reactjs react-router axios react-router-v4 mobx

首页
<
1
2
3
4
>
尾页