Tag: 反应

反应：“this”在组件函数中是未定义的: class PlayerControls extends React.Component { constructor(props) { super(props) this.state = { loopActive: false, shuffleActive: false, } } render() { var shuffleClassName = this.state.toggleActive ? "player-control-icon active" : "player-control-icon" return ( <div className="player-controls"> <FontAwesome className="player-control-icon" name='refresh' onClick={this.onToggleLoop} spin={this.state.loopActive} /> <FontAwesome className={shuffleClassName} name='random' onClick={this.onToggleShuffle} /> </div> ); } onToggleLoop(event) { // "this is undefined??" <— here this.setState({loopActive: […]

在Flux体系结构中，您如何pipe理客户端路由/ url状态？: 作为商店生命周期问题的后续，在典型的Web应用程序中，通过URL可以快速访问当前的应用程序状态，因此您可以重新访问该状态并使用向前和向后button在状态之间移动。通过Flux，我们希望所有的操作都能通过调度程序，我想也包括URL更改。您将如何pipe理stream量应用程序中的URL更改？

一个React-Redux应用程序可以真正的扩展，比如Backbone？即使重新select。在移动: 在Redux中，每次对商店进行更改都会触发所有连接组件的notify 。这对于开发人员来说是非常简单的，但是如果你有一个N个连接组件的应用程序，而且N很大呢？即使与组件无关，每次对存储的更改仍会对商店的reselectpath运行带有简单===testing的shouldComponentUpdate 。这很快，对吗？当然，也许一次。但是N次，每一次改变？ devise中的这一根本性变化使我怀疑Redux的真正可伸缩性。作为进一步的优化，可以使用_.debounce批量处理所有的notify 。即便如此，对每个商店进行N ===testing都会发生变化，并处理其他逻辑，例如查看逻辑，似乎是达到目的的一种手段。我正在与一个拥有数百万用户的健康和健身社交移动Web混合应用程序，并正在从Backbone转换到Redux 。在这个应用程序中，用户会看到一个可滑动的界面，允许他们在不同的视图堆栈之间导航，类似于Snapchat，除了每个堆栈都有无限的深度。在最stream行的视图中，无尽的滚动器可以有效地处理加载，渲染，附加和分离Feed等项目。对于参与的用户来说，滚动成百上千个post，然后input用户的提要，然后input另一个用户的提要等是很常见的。即使进行了大量优化，连接组件的数量也可能变得非常大。另一方面，Backbone的devise允许每个视图精确地聆听影响它的模型，将N减less到一个常量。我是否错过了一些东西，或者Redux从根本上来说是一个大型应用程序的缺陷？

在反应组件之外访问Reduce存储的最佳方式是什么？: 当我尝试访问反应组件中的商店时，@ @connect非常适用。但是，我应该如何在其他一些代码中访问它。例如：假设我想使用授权令牌来创build我的应用程序中可以全局使用的axios实例，那么实现这一点的最佳方法是什么？这是我的api.js // tooling modules import axios from 'axios' // configuration const api = axios.create() api.defaults.baseURL = 'http://localhost:5001/api/v1' api.defaults.headers.common['Authorization'] = 'AUTH_TOKEN' // need the token here api.defaults.headers.post['Content-Type'] = 'application/json' export default api 现在我想从我的商店访问一个数据点，这里是如果我试图使用@connect在反应组件中获取它的样子 // connect to store @connect((store) => { return { auth: store.auth } }) export default class App extends Component […]

嗡，但在JavaScript: 我正在成为David Nolen的Om图书馆的粉丝。我想在我们的团队中构build一个不太大的Web应用程序，但是我不能真正说服我的队友切换到ClojureScript。有没有一种方法可以使用om中的原则，但在JavaScript中构build应用程序？我在想： immutable-js或mori为不可变的数据结构用于CSP的js-csp 只是app-state atom的一个正常的javascript对象不可变js的游标用于跟踪应用程序状态并在游标上发送通知库我正在努力与上面的5号。有没有人冒险进入这个领域或有任何build议？也许有人已经尝试使用immutable-js构buildreact.js应用程序？

什么是mapDispatchToProps？: 我正在阅读Redux库的文档，它有这个例子，除了读取状态之外，容器组件还可以调度动作。以类似的方式，您可以定义一个名为mapDispatchToProps()的函数来接收dispatch（）方法，并返回要注入到表示组件中的callback支持。这实际上没有意义。当你已经有mapStateToProps时候，为什么你需要mapStateToProps ？他们还提供了这个方便的代码示例： const mapDispatchToProps = (dispatch) => { return { onTodoClick: (id) => { dispatch(toggleTodo(id)) } } } 有人能请外行解释这个function是什么，为什么它有用吗？

应该通量存储或行动（或两者）接触外部服务？: 如果商店保持自己的状态，并有能力调用networking和数据存储服务…在这种情况下，这些行为只是愚蠢的消息传递者， -要么- 如果商店是来自动作的不可变数据的愚蠢收件人（并且动作是在外部源之间获取/发送数据的动作），在这种情况下的存储将作为视图模型，并且能够聚集/过滤它们数据在它们自己的状态基础上设置它们由动作提供的不变数据。在我看来，它应该是一个或另一个（而不是两者的组合）。如果是这样，为什么比另一个更受欢迎/推荐？

Guzzlehttp – 如何从Guzzle 6获得响应的身体？: 我正在尝试围绕我的公司正在开发的api编写封装。这是安静的，使用邮递员我可以发送一个post请求到像http://subdomain.dev.myapi.com/api/v1/auth/一样的用户名和密码作为POST数据，我给回了一个令牌。所有按预期工作。现在，当我尝试从PHP执行相同的操作时，我得到一个GuzzleHttp\Psr7\Response对象，但似乎无法像在Postman请求中那样在其内部的任何位置find该令牌。相关的代码如下所示： $client = new Client(['base_uri' => 'http://companysub.dev.myapi.com/']); $response = $client->post('api/v1/auth/', [ 'form_params' => [ 'username' => $user, 'password' => $password ] ]); var_dump($response); //or $resonse->getBody(), etc… 上面的代码的输出看起来像（警告，传入的文本墙）： object(guzzlehttp\psr7\response)#36 (6) { ["reasonphrase":"guzzlehttp\psr7\response":private]=> string(2) "ok" ["statuscode":"guzzlehttp\psr7\response":private]=> int(200) ["headers":"guzzlehttp\psr7\response":private]=> array(9) { ["connection"]=> array(1) { [0]=> string(10) "keep-alive" } ["server"]=> array(1) { [0]=> string(15) "gunicorn/19.3.0" […]

里面的map函数Reactjs是“undefined”: 我正在使用Reactjs，编写一个菜单组件。 "use strict"; var React = require("react"); var Menus = React.createClass({ item_url: function (item,categories,articles) { console.log('afdasfasfasdfasdf'); var url='XXX'; if (item.type == 1) { url = item.categoryId == null ? 'javascript:void(0)' : path('buex_portal_browse_category', {slug: categories[item.categoryId].slug}); } else if (item.type == 2) { url = item.articleId == null ? 'javascript:void(0)' : path('buex_portal_view_article', {slug: articles[item.articleId].slug, id: item.articleId}); } […]