草庐IT

example-redux-update-nested-props

全部标签

javascript - Reactjs-setState previous state为第一个参数,props为第二个参数

我在这篇官方文章中读到了以下几行:this.propsandthis.statemaybeupdatedasynchronously,youshouldnotrelyontheirvaluesforcalculatingthenextstate.任何人都可以通过示例向我解释以下代码试图实现什么。this.setState((prevState,props)=>({couter:prevState.counter+props.increment}));IamreferringtothisofficialwebsiteofreactjsReact.js 最佳答案

javascript - 在 Redux 架构中集成 React 和 OpenLayers

我们公司目前正在开发一种新的网络map解决方案。到目前为止,我们决定使用React构建应用程序和OpenLayers4.因为我们要使用Redux我们架构的模式将有一个保存应用程序状态的redux存储。这个栈我们面临的问题如下:map是我们应用程序的核心元素,它的实例需要传递给许多不同的组件。例如,在map上绘制要素的工具需要引用map实例,以便它可以将自己作为交互工具添加到其中。我们讨论了如何构建我们的应用程序以集成OpenLayers与React以最可靠的方式并最终采用两种不同的方法:我们讨论的第一种方法是在应用程序范围的redux存储中保存对map对象的引用,这样它就可以通过@co

javascript - 使用带有 typescript 的样式化组件 "as" Prop

我目前正在构建一个模式库,我在其中构建了一个Button组件使用React和styled-components.基于Button组件,我想要我所有的Links组件看起来完全一样,并接收完全相同的Prop。为此,我使用asProp来自styled-components,这让我可以将已构建的元素用作另一个标签或组件。按钮组件import*asReactfrom'react'import{ButtonBorderAnimation}from'./ButtonAnimation'import{ButtonProps,ButtonVariant}from'./Button.types'impor

javascript - 将 AJAX 结果作为 props 传递给子组件

我正在尝试使用React创建博客。在我的主要ReactBlog组件中,我正在对节点服务器执行AJAX调用以返回一组帖子。我想将此发布数据作为Prop传递给不同的组件。特别是,我有一个名为PostViewer的组件,它将显示帖子信息。我希望它默认显示通过Prop从其父级传递过来的帖子,否则显示通过状态调用设置的数据。目前,我的代码的相关部分如下所示。varReactBlog=React.createClass({getInitialState:function(){return{posts:[]};},componentDidMount:function(){$.get(this.pro

javascript - Redux 不更新 IE11 中的属性

我在InternetExplorer11中遇到了一个关于React和Redux的奇怪问题。我使用redux&thunk+promise中间件创建了一个React应用程序。所述应用程序在Chrome、Safari和Firefox中运行完全正常,但在InternetExplorer中运行时,React/Redux不会更新11Prop。在检查网络选项卡时,我可以看到Http请求被触发得很好。在Reduxreducers中记录此结果也给出了预期的结果。但似乎返回新状态并没有更新Prop。或者触发任何组件的重新渲染。(仅在IE中)。我尝试谷歌查看是否有人在同一条船上,但我找不到任何符合我的问题的

javascript - 将 Prop 与数据同步的正确 vueJS 方法

考虑一个允许显示/编辑博文的VueJS应用程序。单击“编辑博客文章”时,会显示一个模式(Vue组件)以编辑当前的博客文章(只是一个普通的js对象)。为此,我将当前博文作为prop传递给模态组件。Modal组件有几个表单域,应该用博客文章属性填充。但是,Vue的“方式”是在Modal组件上有一个data对象,充当填充表单字段的模型,反之亦然,当用户更改时更新表单字段。问题:如何将作为prop传递的博文连接到模态组件的data字段,以便:博文填充表单字段博文在更新表单字段时得到更新完成此任务的正确Vue方法是什么? 最佳答案 你有三种(

javascript - Redux Forms 提交验证不设置错误信息

我正在尝试制作带有提交验证的表单。当我提交表单时,我的handleSubmit触发并抛出SubmissionError,但没有任何反应。提交(每次都报错):functionsubmit(values){console.log(values);thrownewSubmissionError({password:'Wrongpassword',_error:'Loginfailed!'});}示例中的渲染字段:constrenderField=({input,label,type,meta:{touched,error}})=>({label}{touched&&error&&{error

javascript - 使用 vue-router 将查询绑定(bind)到 props

是否可以以声明方式将查询值绑定(bind)到props?我希望/my-foo?bar=my-bar传递Prop{foo:"my-foo",bar:"my-bar"}.我目前正在使用这样的东西:exportdefaultnewRouter({routes:[{path:"/:foo",name:"Foo",component:FooPage,props:route=>({foo:route.params.foo,bar:route.query.bar})}]});我正在寻找类似的东西:exportdefaultnewRouter({routes:[{path:"/:foo?bar=:ba

javascript - Nest.js 中的 Socket.io 确认

我正在尝试在Nest.jsWebSocketGateways中启用socket.io确认回调。我希望能够发出这个:socket.emit('event','somedata',function(response){//dosomething})然后像这样使用消息处理程序:@SubscribeMessage('event')onStart(client,data,ack){//Dostuffack('stuffcompleted');}根据thisnestjs/nestGitHubissue问题是库中不支持它,因此您必须构建自己的websocket适配器。我试过了,但不知Prop体怎么做

javascript - React-Router-Redux 和 React-Bootstrap

我已经和这个问题斗争了一段时间了!我想拥有始终带有Logo、导航的“主应用程序容器”...我想使用react-bootstrap来美化它。目前我遇到了问题,我的项目基于davezuko的“react-redux-starter-kit”我试着把我所有的Bootstrap和在提供程序内的Root容器中。一切都显示出来,看起来不错,但我的链接都不起作用,当我放置一个常规的react路由器时我会遇到同样的问题。我想,嗯,链接在路由调用的View中工作,所以我在之后将所有这些复制到路由中导出默认值(商店)=>(Babel、eslint和webpack允许编译,但是当我运行页面时,这些都没有显示