加载状态在React应用程序中无效(MobX)
加载状态在React应用程序中无效(MobX)是指在使用MobX作为状态管理库的React应用中，无法正确地管理和显示加载状态。
在React应用中，加载状态通常用于在数据请求或异步操作期间显示加载指示器或占位符。然而，在使用MobX时，由于其响应式数据流的特性，加载状态的管理可能会出现一些问题。
解决这个问题的一种方法是使用MobX提供的@observable装饰器来定义一个可观察的加载状态变量。然后，在数据请求或异步操作开始时，将加载状态设置为true，并在操作完成后将其设置为false。在React组件中，可以使用@observer装饰器将组件与加载状态绑定，以便在加载状态变化时重新渲染组件。
以下是一个示例代码：
import { observable } from 'mobx';
import { observer } from 'mobx-react';
@observer
class MyComponent extends React.Component {
@observable isLoading = false;
fetchData = async () => {
this.isLoading = true;
try {
// Perform data fetching or async operation
await someAsyncOperation();
} catch (error) {
// Handle error
} finally {
this.isLoading = false;
}
}
render() {
return (
<div>
{this.isLoading ? 'Loading...' : 'Data loaded'}
<button onClick={this.fetchData}>Fetch Data</button>
</div>
);
}
}在上面的示例中，isLoading被定义为可观察的加载状态变量。在fetchData方法中，加载状态在数据请求开始和结束时进行设置。在组件的render方法中，根据加载状态的值来显示不同的内容。
对于推荐的腾讯云相关产品和产品介绍链接地址，由于要求不能提及具体的云计算品牌商，无法提供相关链接。但是，腾讯云提供了丰富的云计算服务，包括云服务器、云数据库、云存储等，可以根据具体需求选择适合的产品。
相关·内容
1回答
如何在存储构造函数上异步加载MobX数据？
javascript、reactjs、asynchronous、mobx、mobx-react
我正在尝试编写一个在构造函数中异步加载数据的MobX存储。问题是，当我尝试更新@observable时，它不会触发更改，因此React组件永远不会更新。
这就是存储(实际上，setTimeout是一个服务器调用)：
class MyStore {
@observable isLoading = true;
constructor() {
setTimeout(() => {
this.isLoading = false; // won't update the React component!
}, 1000);
}
}
此组件会阻止应用
浏览 18提问于2018-08-15得票数 2
回答已采纳
1回答
使用Mobx异步加载组件数据
ajax、reactjs、mobx、server-rendering
我遇到了一个问题，如何让react组件具有基于异步获取数据的初始状态。MyComponent从API中获取数据，并通过Mobx action设置其内部data属性。
客户端，调用componentDidMount，然后获取数据，然后设置并正确呈现数据。
import React from 'react';
import { observer } from 'mobx-react';
import { observable, runInAction } from 'mobx';
@observer
export default class MyC
浏览 0提问于2016-12-13得票数 1
回答已采纳
3回答
为什么当我向function事件处理程序函数中添加@action装饰符时，组件没有重新呈现？
javascript、reactjs、mobx、mobx-react、mobx-utils
问题：
当我向类成员fn添加@action装饰符时，下面的react组件不会重新呈现。
import { observable, action } from "mobx";
import { observer } from "mobx-react";
import * as React from "react";
import { render } from "react-dom";
@observer
class PriceCounter extends React.Component {
@observable pric
浏览 2提问于2020-05-10得票数 1
回答已采纳
1回答
你如何从一个可以用反应的方式观察到的mobx中得到一个项目？
reactjs、mobx
让我们假设有一个单例TodosStore，它看起来如下所示：
class TodosStore {
@observable isLoading;
@observable todos;
@action.bound fetchTodos() {
this.isLoading = true;
return api.getTodos().then(todos => this.todos = todos)
.finally(()=>this.isLoading=false);
}
getTod
浏览 0提问于2018-04-27得票数 1
回答已采纳
2回答
简单的可观察到的不呈现MobX
reactjs、mobx、mobx-react
我有一个带有MobX @observer注释的简单React类和一个简单的数据结构(用@observable data = { .. }注释)。操作更新此结构，但确实呈现。
这是这个类的源代码：-
import React, {Component, Fragment} from 'react';
import {observer} from "mobx-react";
import {observable} from "mobx";
import {withRouter} from 'react-router-dom';
@ob
浏览 12提问于2020-05-28得票数 0
回答已采纳
1回答
用react mobx在异步抓取中重命名
asynchronous、mobx、mobx-react
我正在尝试将与和结合使用，并且在异步数据检索时无法使组件重定向。
这是我的数据模型，在state/user.js中
import { Model } from 'mobx-rest';
class User extends Model {
url() {
return '/me';
}
}
export default new User();
这是App.js中的React组件
import React from 'react';
import { inject, observer } from 'mobx-react
浏览 0提问于2018-09-01得票数 1
回答已采纳
1回答
使用mobx并作出反应得到一个错误:太多的重新呈现。限制呈现的次数以防止无限循环。
reactjs、axios、mobx、mobx-react
在我看来，我希望使用mobx来保存一个名为掩码的状态，当我使用axios时，这个状态将是真的，当我结束调用时，这个状态将是假的，下面是我的代码。
store.tsx
import { makeAutoObservable, runInAction } from 'mobx';
import axios from 'axios';
class Store {
isHeaderShow = false;
isTabBarShow = false;
isShowingMovies = [];
isShowingMovieIds = [];
willShow
浏览 19提问于2022-03-08得票数 1
回答已采纳
2回答
通过阵列的MobX @可观测到的数组来响应PropTypes.array的组件道具
reactjs、mobx、mobx-react
因此，我在我的应用程序中使用一个普通的React组件库和MobX作为状态管理。当我有一个可以观察到的数组作为数据，并且我想把它从我的组件(这是一个mobx-react observer)传递给UI库的组件(这个支柱是PropTypes.array的类型)时，组件拒绝它，说我的可观察数组是一个对象，而不是一个数组。
// my store
class Store {
@observable data = [...];
}
// my component
@inject('store')
@observer
class MyComponent extends React.C
浏览 2提问于2017-05-22得票数 3
回答已采纳
1回答
MobX &：我们如何在中实现mobX？
reactjs、react-native、mobx、react-functional-component、state-management
下面的代码只是我在网上找到的一个例子。
import { observable, computed } from "mobx";
import { observer } from "mobx-react";
import React from "react";
import { SafeAreaView, Text, TextInput, StyleSheet } from "react-native";
@observer
class Shop extends React.Component {
@observable
浏览 4提问于2021-03-17得票数 2
回答已采纳
1回答
MobX -可观察到没有更新已通过的道具？
mobx、mobx-react
当使用MobX和React时，我有两个组件。我从父组件中向子组件发送了一个道具，如下所示：
import { computed } from 'mobx'
import { observer } from 'mobx-react'
@observer
class Parent extends React.Component {
@computed get user() {
const { gamer } = this.props;
}
render () {
return <div><Child user={th
浏览 4提问于2017-08-09得票数 2
2回答
Mobx React组件在呈现时不会更新
reactjs、rendering、mobx
我正在与mobx和React合作。我有一个带有ComponentDidMount的类组件(它通过async-await调用存储)。第一个方法将所有字段呈现为未定义，因为来自store的响应是comming。当我从存储收到response.data时，组件没有更新，也没有呈现again.All，字段又是未定义的。我的组件
import React, { Component } from "react";
import { inject, observer } from "mobx-react";
import { observable, action } from
浏览 1提问于2019-11-28得票数 0
1回答
如何在持久的NextJS响应音频播放器组件中捕获Mobx可观察的更新？
javascript、reactjs、next.js、mobx、server-side-rendering
我有一个服务器端呈现音频播放器反应应用程序。
使用，我有一个持久的AudioPlayer组件，在这个组件中，每当mobx存储中的@observable playerData = {}发生变化时，我都要调用一个this.play(mp3url)函数。
我已经成功地点击了我的应用程序中的其他组件，随时更新playerData。
但是我无法在我的AudioPlayer组件中检测到这些更新，所以我可以设置它的状态并调用this.play(mp3url)来开始播放音频。
页面/_app.js
import initializeStore from '../stores/stores';
浏览 1提问于2019-10-05得票数 1
回答已采纳
3回答
mobx + react意外标记
reactjs、mobx、mobx-react
因此，我使用react创建了一个应用程序，但没有从进行配置
我安装了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": &#
浏览 0提问于2016-12-14得票数 18
回答已采纳
2回答
无法让最基本的mobx存储与观察者一起工作
javascript、reactjs、mobx、mobx-react
我刚开始尝试mobx-使用商店反应，并想使用一个商店和一个单一的可观察，但甚至不能使这个工作。
使用@observer，我得到了错误Uncaught TypeError: Cannot assign to read only property 'render' of object '#<ProxyComponent>'。
没有它，值就变成1。
我不知道这里出了什么问题，有什么想法吗？
import {observable} from 'mobx'
import {inject, observer} from 'mobx-rea
浏览 0提问于2018-01-17得票数 0
回答已采纳
3回答
MobX不变失败:此时不允许像更改状态这样的副作用
react-router、react-bootstrap、mobx、mobx-react
我是一个JS/React/MobX/else新手，试图做一些非常简单的事情，但没有成功。
我想要的是-2个按钮，一旦点击，显示相应的选项卡在一个模式，使用反应-引导和mobx。
但是我不断地发现这个错误：
mobx遇到了一个由反应或观察者组件引发的未察觉的异常：'ReactionAuthModal#0.render()错误: mobx不变失败:此时不允许像更改状态这样的副作用。您是否试图从例如reaction组件的呈现函数中修改状态?尝试修改: AuthModalStore@3.tab
请帮帮忙。非常感谢。
商店代码：
import { observable } from 'm
浏览 4提问于2017-02-11得票数 0
2回答
在使用MobX时，我可以直接修改状态吗？
javascript、reactjs、mobx、mobx-react
我不应该这样做的唯一原因是让react更新视图。
但似乎MobX-react为我做了这些肮脏的工作。我只需要将this.state标记为可观察的，一切都如预期的那样工作。有什么缺点吗？我不想把所有的州都扔进一家大商店。
代码：
const {observable, computed} = mobx;
const {observer} = mobxReact;
const {Component} = React;
@observer
class Form extends React.Component{
@observable state = {
username:
浏览 7提问于2017-03-16得票数 1
回答已采纳
1回答
mobx @inject不创建新的(修饰)组件
javascript、reactjs、mobx、mobx-react
我正在尝试使用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
3回答
MobX装饰器不工作
javascript、reactjs、react-native、mobx、mobx-react
我在让@observable和@computed这样的装饰器在我的项目中工作时遇到了麻烦。
这是我的文件。
package.json：
{
"name": "heroku-react",
"version": "0.1.0",
"private": true,
"dependencies": {
"babel-plugin-syntax-decorators": "^6.13.0",
"mobx": "^3.1.
浏览 2提问于2017-06-05得票数 1
1回答
Set has方法不返回现有对象的true。
javascript、reactjs、typescript、set、stackblitz
这里我的堆栈闪电战：
JSX
import React, { Component } from 'react';
import { render } from 'react-dom';
import './style.css';
import { observer } from 'mobx-react';
import { observable } from 'mobx';
import { MountingViewModel } from './MountingViewModel';
impor
浏览 0提问于2018-07-09得票数 0
2回答
在NgRx中完成远程操作前的功能
rxjs、ngrx、ionic5
我在NgRx中遇到了竞争问题。在下面的示例中，我在启动异步远程操作的同时异步呈现一个加载对话框。但是远程操作有可能在加载对话框完全构建之前完成并触发dismissLoadingDialog()，这会导致控制台错误。 在远程操作开始之前，在NgRx中完成presentLoadingDialog()的好策略是什么？ @Effect() fetchServerData$ = this.actions$.pipe(
ofType<FetchServerData>(ActionTypes.FetchServerData),
switchMap(action => {
浏览 31提问于2020-07-29得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
