- iOS/Objective-C 元类和类别
- objective-c - -1001 错误,当 NSURLSession 通过 httpproxy 和/etc/hosts
- java - 使用网络类获取 url 地址
- ios - 推送通知中不播放声音
好吧,我被 reactjs、flux 架构和 react-router 的问题困住了。我有以下路线(只是路线的一部分):
<Route name="prepare-seniors">
<Route name="senior" path=":candidateId" handler={SeniorCandidate}>
<DefaultRoute handler={SeniorProfile}/>
<Route name="senior-recommendations" path="recommends">
<DefaultRoute handler={SeniorRecommends}/>
<Route name="senior-rec-new" path="new"/>
</Route>
</Route>
</Route>
Senior Profile View 进行 API 调用以加载个人数据。当您导航到 Recommends View 时,个人的 ID 用于进行另一个调用以加载推荐。如果我先查看个人资料页面并导航到推荐页面,效果会很好。但是,如果我进行硬重载,我会得到:
Uncaught Error: Invariant Violation: Dispatch.dispatch(...): Cannot dispatch in the middle of a dispatch.
我意识到这是因为在第一个 API 返回后调用分派(dispatch),它退出并开始更新组件。在完成之前,推荐页面会调用其 API 并尝试发送其结果。我在论坛上读到 React.addons.batchUpdates 是解决此问题的一种方法,但我不知道如何让它工作。 GitHub Batch Updates Issue和此处讨论类似内容的另一个链接 Trying to use waitFor .第一个建议通过添加以下内容来调整调度程序:
// assuming a var `flux` containing your Flux instance...
var oldDispatch = flux.dispatcher.dispatch.bind(flux.dispatcher);
flux.dispatcher.dispatch = function(action) {
React.addons.batchedUpdates(function() {
oldDispatch(action);
});
};
但我无法完成这项工作。也许我只是错误地实现了它。
我已经阅读了 Chat 和 TodoMVC 示例。我了解 waitFor 在聊天示例中的使用方式...但是它们都使用相同的 API,因此很明显,一个将等待另一个。我的问题涉及 API 和调度之间的竞争条件……我认为 setTimeout 不是一个好的解决方案。
我需要了解如何设置调度程序,使其能够对调度或 API 调用进行排队。或者更好的方法来告诉每个组件为其数据进行 API 调用,所以我什至没有调度问题。
哦,这是我的 Dispatcher.js 文件,您可以看到它是如何设置的:
'use strict';
var flux = require('flux'),
Dispatcher = require('flux').Dispatcher,
React = require('react'),
PayloadSources = require('../constants/PayloadSources'),
assign = require('object-assign');
//var oldDispatcher = flux.Dispatcher.dispatch.bind(AppDispatcher);
//
//flux.dispatcher.dispatch = function(action) {
// React.addons.batchedUpdates(function() {
// oldDispatcher(action);
// });
//};
var AppDispatcher = assign(new Dispatcher(), {
handleServerAction: function(action) {
var payload = {
source: PayloadSources.SERVER_ACTION,
action: action
};
this.dispatch(payload);
},
handleViewAction: function(action) {
if (!action.type) {
throw new Error('Empty action.type: you likely mistyped the action.');
}
var payload = {
source: PayloadSources.VIEW_ACTION,
action: action
};
this.dispatch(payload);
}
});
module.exports = AppDispatcher;
最佳答案
好的,首先我要说的是,我目前正在学习 React 和 Flux,绝不是专家。不过我还是要试一试:
根据您所说的,听起来您有 2 个异步操作触发,然后当它们返回时尝试发送调度消息由 2 个独立的 aync web 服务调用触发两次调度调用引起的问题。
我不认为在这种情况下批量更新会有帮助,因为它在很大程度上取决于时间(即,如果它已经排队重新渲染并正在等待第二次调用进入时执行的机会,它可能批处理成功,但是如果它是在更新中期出现的,那么您将处于与现在完全相同的情况)。
我认为这里的实际问题来自如何/何时触发这些操作(您在帖子末尾简要提到了这一点)。听起来您正在从 React 组件 Render 调用中触发操作(有点像延迟加载)。这几乎正是 Flux 试图避免的事情,因为这种模式很容易导致应用程序流中的无限循环或奇怪的状态/模式。
正如您在描述中提到的,您可能需要预先触发此加载,而不是从各个组件触发,据我所知,我建议需要在对核心组件调用 React.render 之前完成。如果您查看示例聊天应用程序,他们会在 app.js 中做类似的事情。 :
ChatExampleData.init(); // load example data into localstorage
ChatWebAPIUtils.getAllMessages();
React.render(
<ChatApp />,
document.getElementById('react')
);
所以我建议遵循上述模式,在向客户端显示加载微调器的同时预先加载任何初始数据。
或者,根据您的技术堆栈,您可以最初在服务器上呈现(节点示例 here ReactJS.Net 的 .Net 版本),这样您就不会在客户端启动时出现延迟(您也可以避免所有搜索引擎索引的有趣业务,如果这是一个问题(顺便说一句,我没有尝试过其中任何一个,只是阅读它们)。
关于javascript - React、Flux、React-Router Dispatch Error - 可能的 batchUpdates 解决方案?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28759728/
问题是,当用户回复彼此的帖子时,我必须这样做: margin-left:40px; 对于 1 级深度 react margin-left:80px; 对于 2 层深等 但是我想让 react div
我试图弄清楚如何将 React Router 与 React VR 连接起来。 首先,我应该使用 react-router dom/native ?目前尚不清楚,因为 React VR 构建在 Rea
我是 React 或一般编码背景的新手。我不确定这些陈述之间有什么区别 import * as react from 'react' 和 import react from 'react' 提前致谢!
我正在使用最新的稳定版本的 react、react-native、react-test-renderer、react-dom。 然而,react-native 依赖于 react@16.0.0-alp
是否 react 原生 应用程序开发可以通过软件架构实现,例如 MVC、MVP、MVVM ? 谢谢你。 最佳答案 是的。 React Native 只是你提到的那些软件设计模式中的“V”。如果你考虑其
您好我正在尝试在我的导航器右按钮中绑定(bind)一个功能, 但它给出了错误。 这是我的代码: import React, { Component } from 'react'; import Ico
我使用react native创建了一个应用程序,我正在尝试生成apk。在http://facebook.github.io/react-native/docs/signed-apk-android.
1 [我尝试将分页的 z-index 更改为 0,但没有成功] 这是我的codesandbox的链接:请检查最后一个选择下拉列表,它位于分页后面。 https://codesandbox.io/s/j
我注意到 React 可以这样导入: import * as React from 'react'; ...或者像这样: import React from 'react'; 第一个导入 react
我是 react-native 的新手。我正在使用 React Native Paper 为所有屏幕提供主题。我也在使用 react 导航堆栈导航器和抽屉导航器。首先,对于导航,论文主题在导航组件中不
我有一个使用 Ignite CLI 创建的 React Native 应用程序.我正在尝试将 TabNavigator 与 React Navigation 结合使用,但我似乎无法弄清楚如何将数据从一
我正在尝试在我的 React 应用程序中进行快照测试。我已经在使用 react-testing-library 进行一般的单元测试。然而,对于快照测试,我在网上看到了不同的方法,要么使用 react-
我正在使用 react-native 构建跨平台 native 应用程序,并使用 react-navigation 在屏幕之间导航和使用 redux 管理导航状态。当我嵌套导航器时会出现问题。 例如,
由于分页和 React Native Navigation,我面临着一种复杂的问题。 单击具有类别列表的抽屉,它们都将转到屏幕 问题陈述: 当我随机点击类别时,一切正常。但是,在分页过程中遇到问题。假
这是我的抽屉导航: const DashboardStack = StackNavigator({ Dashboard: { screen: Dashboard
尝试构建 react-native android 应用程序但出现以下错误 info Running jetifier to migrate libraries to AndroidX. You ca
我目前正在一个应用程序中实现 React Router v.4,我也在其中使用 Webpack 进行捆绑。在我的 webpack 配置中,我将 React、ReactDOM 和 React-route
我正在使用 React.children 渲染一些带有 react router 的子路由(对于某个主路由下的所有子路由。 这对我来说一直很好,但是我之前正在解构传递给 children 的 Prop
当我运行 React 应用程序时,它显示 export 'React'(导入为 'React')在 'react' 中找不到。所有页面错误 see image here . 最佳答案 根据图像中的错误
当我使用这个例子在我的应用程序上实现 Image-slider 时,我遇到了这个错误。 import React,{Component} from 'react' import {View,T
我是一名优秀的程序员,十分优秀!