草庐IT

react组件中方法调用

全部标签

javascript - 为什么我的 React 组件渲染被调用两次,一次没有数据,然后又一次有数据,但是为时已晚的异常?

我有一个组件TreeNav,其数据来自api调用。我已经设置了reducer/action/promise和所有的管道,但是当我在数据上调用map()时在组件渲染中,得到“UncaughtTypeError:Cannotreadproperty'map'ofundefined”。故障排除显示TreeNavrender()被调用了两次。第二次是在数据从api返回之后。但是由于第一个render()错误,第二个render()永远不会运行。这是我的代码文件:--------reducers/index.js--------import{combineReducers}from'redux'

javascript - 在不制作副本的情况下替换 react redux reducer 中的新状态

如果我已经完全替换了状态的一部分,我是否仍然需要使用Object.assign或扩展运算符来复制原始状态并将其替换为新状态,或者我可以直接返回我的reducer中的新状态?constfetching=(state={isFetching:false},action)=>{switch(action.type){case'REQUESTING':returnObject.assign({},state,{isFetching:true})case'RECEIVE_POKEMON_TYPE_INFO':returnObject.assign({},state,{isFetching:fal

javascript - 了解 Javascript 的 _this、不同类型的函数调用以及如何在函数内部调用函数?

我正在学习如何对现有的javascript代码进行逆向工程,并且遇到了一些问题,这是由于我不了解核心javascript的工作原理。下面是代码以及我的评论的屏幕截图。代码以声明varwarper开始。然后warper变量等于函数内的函数?为什么它不是通常调用的functionWarper(),而是在另一个函数中?我注意到了_this的使用。这与通常使用的常规this有何不同?#btn-submitid被设置为在点击时激活。我可以看到它调用了click_submit函数,但为什么它是Warper.prototype.click_submit而不是click_submit()?我的最后一个

javascript - Redux Action 中的 Getters - React Native

我希望有一些函数可以获取当前状态来用它做一些逻辑,而不必通过参数将当前状态传递给函数。这是我的例子。在我的Action文件中,我有:exportconstaddToSearchHistory=(newSearch)=>({type:ADD_TO_SEARCH_HISTORY,newSearch})exportconstaddToCardHistory=(newCard)=>({type:ADD_TO_CARD_HISTORY,newCard})例如,我想要一个“getter”函数,告诉我“搜索历史”是否已经达到10个项目。所以我所做的是:exportconstsearchHasMaxH

javascript - 使用指令将组件动态添加到子元素

尝试使用指令将组件动态放置到子元素。组件(作为模板):@Component({selector:'ps-tooltip',template:`{{content}}`})exportclassTooltipComponent{@Input()content:string;}指令:import{TooltipComponent}from'./tooltip.component';@Directive({selector:'[ps-tooltip]',})exportclassTooltipDirectiveimplementsAfterViewInit{@Input('ps-toolti

javascript - 如何在 ES6 中调用类的父类的父类的构造函数?

我正在使用ES6类,我的类(A)扩展了类B,类B扩展了类C。A如何扩展方法,然后调用C的该方法版本。classC{constructor(){console.log('classc');}}classBextendsC{constructor(){super()console.log('no,Idon'twantthisconstructor.');}}classAextendsB{constructor(){//WhatshouldIbedoinghere?IwanttocallC'sconstructor.super.super();}}编辑:谢谢大家,我将停止尝试做这种愚蠢的事情

javascript - React - 按对象属性过滤

我正在尝试按属性过滤对象,但无法正常工作。对象中的数据结构如下:我正在通过UID获取数据,然后映射该对象的所有项目,但我无法使过滤器工作。渲染方法如下所示:render(){return({Object.keys(this.state.dataGoal).filter(key=>key.main==true).map((key,index)=>{return{this.state.dataGoal[key].name}{this.state.dataGoal[key].main}})}知道我做错了什么吗?感谢您的帮助,雅各布 最佳答案

javascript - react 。 child 作为 Prop

我知道如何将child传递给React组件:OpenThisWonderfulLink但是我可以这样使用吗:有效,但这正常吗?我可以每次都使用这种方式吗?附言抱歉我的英语不好..) 最佳答案 是的,children就像任何其他prop一样,可以用作prop来渲染子组件,而不是将子组件嵌套在相应的元素 关于javascript-react。child作为Prop,我们在StackOverflow上找到一个类似的问题: https://stackoverflow.

javascript - Mapbox gl & directions API 调用 - 不显示路线

我有一个带有多个标记的应用程序,用于显示旅行。每个标记都是一个步骤,我想在每个标记之间创建一条路线,它跟随标记(后续步骤)。为此,现在我有这段代码:$(document).ready(function(){varmap;vardirections;//tokenaccessforMAPBOXGLmapboxgl.accessToken='pk.eyJ1IjoiYW50b3RvIiwiYSI6ImNpdm15YmNwNTAwMDUyb3FwbzlzeWluZHcifQ.r44fcNU5pnX3-mYYM495Fw';//generatemapvarmap=newmapboxgl.Map(

javascript - 将 Redux 状态传递给组件时的最佳实践

我正在与其他几个开发人员一起开发一个React+Redux项目,但我们无法就在何处传递状态和操作的最佳实践达成一致。我的方法是拥有一个“容器”或“提供者”组件,它是父组件,所有必需的状态和操作都映射到状态并向下传递到子组件,从而创建单一的真实来源。然而不利的一面是,您必须记住通过每个子组件向下传递操作和值,这可能很难遵循。另一种开发人员方法是在每个需要它的组件上,在堆栈中的任何位置使用mapStateToProps。因此,如果向下三层或四层的子组件需要特定状态,他将在该组件上使用mapStateToProps。他还会使用import关键字直接导入Action创建器,而不是将它们称为Pr