问题标签 [recompose]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
reactjs - 更改道具时如何更新 React/recompose 组件?
我正在编写此产品列表组件,并且正在与状态作斗争。列表中的每个产品本身就是一个组件。一切都按预期呈现,除了当道具更改时组件没有更新。我正在使用 recompose,withPropsOnChange()
希望每次shouldMapOrKeys
更改道具时都会触发它。然而,这永远不会发生。
让我展示一些代码:
我认为这无关紧要,但addToCart
函数返回一个 Promise。现在,它总是解析为true
.
另一个澄清:currentProducts
和setProducts
分别是保存购物车数据的类(模型)的属性和方法。这也很好用,不会引发异常或显示意外行为。
这里的预期行为是:将产品添加到购物车并更新currentProducts
列表后,addedToCart
道具将更改其值。我可以确认currentProducts
正在按预期更新。但是,这是部分代码未达到(我已在该行添加了一个断点):
因为我已经为另一个组件使用了类似的结构——主要区别在于我“听”的一个道具是由withState()
——定义的,我想知道我在这里缺少什么。我的第一个想法是问题是由直接更新引起的currentProducts
,这里:
所以我尝试了一种不同的方法:
不过,这在执行过程中并没有改变任何东西。
我正在考虑使用withState
而不是withPropsOnChange
. 我想那会奏效。但在这样做之前,我想知道我在这里做错了什么。
react-native - recompose withstate HOC 在 tabNavigator 屏幕上添加了标题(世博小吃)
我最近在我的 tabNavigator 的屏幕上添加了一个 withState HOC,我发现了以下问题:
这是一个解决问题的博览会小吃: https ://snack.expo.io/@softhib/tabnavigator-and-recompose-withstate
问题出在第 152 行的 HomeScreen.js 上。
javascript - React Google Maps:在 MapWithADirectionRenderer 上显示标记重组组件
我的组件MapWithADirectionsRenderer定义如下
但在地图上移动路线后,从谷歌获取的方向正确更新,但不是我想要显示的标记。始终显示相同的标记。
有什么方法可以更新MapWithADirectionRenderer以便它重新渲染我的标记而不仅仅是方向?谢谢
reactjs - 导出到查询时出现 GraphQL 片段错误
所以我有一个使用GraphQl的 reactjs 应用程序,我试图通过使用 Fragments 来减少重复,但是它失败了。
片段(companyQueries.js)
开始使用(withCreateApiKeyMutation.js)
鉴于这种导出,我希望它至少能够编译,但它会出错。
编译器给出的错误
companyQueries.js的第 3 行出错
TypeError: Object(...) 不是函数
出口 const CompanyFragment = gql <--第 3 行
如果有人可以对此提供见解,将不胜感激!
javascript - 重构异步道具更新
当 prop 从视图组件外部更改时,如何使用 recompose 重新渲染组件?
渲染此组件时,它显示值为One,但在 500 毫秒后不会更改为Two,即使它更改了 prop。
这里setTimeout
简化了在实际用例中我订阅 websocket 服务器并且当消息被推送时,消息组件被更新的情况。
rxjs - 使用 mapPropsStream 过滤不起作用
我正在尝试创建一个过滤器,mapPropsStream
但它不起作用。这是我的代码:
我不知道这是否是过滤数据的正确方法,如果不是,这是记住我的数据存储在 redux 中的正确方法?如果是,我的代码有什么问题?
谢谢
rxjs - 使用 componentFromStream 的优点
使用 componentFromStream 有什么好处?在哪种情况下使用它?一些例子?
非常感谢
reactjs - 我应该如何使用 HOC 测试 React 组件的组成(或者我什至应该测试它们)?
使用HOC测试组件通常似乎是一个主要问题(酶#539、酶#1002、重组#407,...)。大多数讨论包括“仅测试 HOC 作为函数,然后不测试用法”的观点,因此对于单元测试,实际组件以命名导出的形式导出并单独测试。然后建议一些解决方法(比如dive
直到到达组件等)。
因此,技术实现对我来说也(相对)清楚,但我现在很难以及最终应该如何以及是否应该使用 HOC 测试该组合物。
例子:
对于应用程序来说,正确调用 withState 并将其prop
传递setProp
给内部组件似乎非常重要。我是否应该始终相应地测试这两个道具是否正确传递,例如
那么,我应该编写这样的测试还是测试应用程序组合的更好方法?
reactjs - REACT.JS 在组件中管理状态与反应路由(链接)最佳实践
我想知道处理我的情况的最佳方法是什么。我有两个Link
组件,每个组件都将状态中的不同变量传递给下一个组件。根据传递的状态,组件有条件地呈现页面上的某些元素。
获取位置的状态并将我的组件的状态设置为保存该变量是最佳做法吗?或者不将其保存在组件的状态中并根据位置的状态有条件地渲染是否可以?
无论哪种方式我都可以,但我想知道你的想法。
链接示例:
组件示例保存到状态:
组件示例未保存到状态:
使用 React Router 4 和重构
reactjs - 如何使用 jest 和酶模拟导入的 React 高阶组件?
我正在为一个项目编写一个模块,该项目是一个包含多个 HOC 的应用程序的 HOC(使用 recompose compose 函数)。我试图测试高阶组件实际上是在包装我的应用程序。
包含 HOC 的示例节点包
我的 HOC 使用上述命名空间的 HOC 包装传递的组件
测试 withWrapper.js
我正在尝试单独测试我的应用程序,并尝试模拟每个 HOC 以返回一个虚拟包装器。这是我目前正在进行测试的地方,并且在 withWrapper.js 的撰写部分中收到“TypeError:不是函数”。我也尝试过其他模拟方法,但不断出错,仍然没有得到任何地方。
我将如何模拟进口的 HOC?