.bind()与箭头函数()的区别=>在React中的用法
假设我有一个函数generateList()可以更新状态并将其映射到. Product 有时我会遇到以下错误: Warning: setState(...): Cannot update during an existing state transition (such as within渲染). Render methods should be a pure function of props... 等.我为此开采了互联网,并出现了这样的答案喜欢: Product ,但我也看到了一个答案(在gi
4 2024-03-30
编程技术问答社区
当使用react-native和react-relay时,箭头功能中引用节点模块的自动绑定被破坏了
我使用的是反应和react-relay,因此我有以下.babelrc文件: { "sourceMaps": "both", "presets": [ "./plugins/babelRelayPlugin", "react-native" ], "passPerPreset": true } 添加一个依赖项,该依赖性在其组件中使用箭头函数作为来自React-Native-Material-Kit的Mkicontoggle( https://github.com/xinthink/reaeact-native-material-kit )无法正确地转录,并且此参考已丢失/错误. 最终导致错误的原始代码如下: _onLayout = (evt) => { this._onLayoutChange(evt.nativeEvent.layout); if (this.props.onLayout) { this.
4 2024-03-26
编程技术问答社区
为什么我的箭头函数有一个原型属性?
文档中提到的 箭头功能没有原型属性 但是当我在小提琴上运行它时,为什么会给出object? http://es6console.com/iwyii5vm/ 为什么它给出一个对象? var Foo = () => {}; console.log(Foo.prototype); 解决方案 如果您在本机ES6引擎中运行此代码,则不会有prototype属性的属性. 本机ES6的示例: 在 var Foo = () => {}; console.log(Foo.prototype); 但是,如果将代码转换为ES5代码,它将不是一个真正的箭头函数,并且它将具有prototype属性. ES6用babel转移的示例: (该片段启用了babel) var Foo = () => {}; console.log(Foo.prototype); 在es6console.com的情况下,正在使用转介剂,这就是为什么您看到此行为的原因.
8 2024-03-26
编程技术问答社区
webpack + babel-transpile对象箭头函数不工作
我正在尝试使用Babel配置WebPack(5),使用Babel-Loader将其转移到ES5. 不幸的是,输出不一致.基本上,它分为两个部分: 一些多填充: 我的代码: 您可以看到,第一部分包含箭头功能,而第二部分则不包含箭头功能. 我尝试在我的.babelrc文件中添加@babel/plugin-proposal-class-properties和@babel/plugin-transform-arrow-functions>,但是class-properties丢失(启用了调试). 我必须承认,我不确定class-properties是问题所在,但是在Google上花费了数小时之后,这是我最好的,所以也许我对这个问题的根源做错了. webpack文件: export default { entry: './src/index.js', mode: 'production', output: { path: path.resolve
8 2024-03-26
编程技术问答社区
等待的异步地图函数返回Promise而不是值
我有这个代码 async function addFiles(dir,tree) { return (await readDir(dir)) .map(async (name) => {await readDir(dir); return name;}) } 但不幸的是,它只是返回了一堆承诺,因为地图中的异步功能不在等待中.我想知道是否有任何方法可以等待上述代码中的映射函数. 解决方案 尝试 async function addFiles(dir,tree) { const files = await readDir(dir) await Promise.all(files.map(async (name) => {await readDir(dir); return name;}) } 其他解决方案 如果您使用的是蓝鸟,则可以使用此清洁剂,async function addFiles(dir, tree) { const files
2 2024-03-26
编程技术问答社区
Babel插件类属性 - React箭头函数
我正在使用NPM运行一个React项目.经过数小时的研究和实验,到处都说我必须将以下代码添加到我的" .babelrc"文件中,该文件我没有目录中,无法创建: { "plugins": [ ["@babel/plugin-proposal-class-properties", { "loose": true }] ] } 但是,当我运行代码时,这会导致以下错误: ERROR in ./src/components/NavBar/Menu.js Module build failed (from ./node_modules/babel-loader/lib/index.js): SyntaxError: /Users/ymoondhra/Desktop/yt-web/src/components/NavBar/Menu.js: Support for the experimental syntax 'classProperties' isn't curre
6 2024-03-26
编程技术问答社区
在超类上访问一个类字段
我有一个具有以下代码的文件: class Animal { doSomething = () => { return 'Hi.'; }; } class Dog extends Animal { doSomething = () => { return super.doSomething() + ' Woof!'; }; } console.log(new Dog().doSomething()); 注意:尝试运行上面的片段可能无法使用,因为我不知道如何使用我的babal设置. 无论如何,当我使用babel对其进行编译并以节点运行时,我会收到以下错误: /Users/elias/src/classFieldTest/build/classFieldTest.js:15 return super.doSomething() + ' Woof!';
10 2024-03-26
编程技术问答社区
如何从webpack输出中删除箭头函数
通过webpack运行我的代码后,它就是箭头功能.我需要在IE11中使用的代码,因此我需要摆脱箭头功能. 我正在为所有.js文件使用babel-loader. 我写了一个加载程序来检查箭头功能的代码,并在通用装载机之后运行它,并且没有获得任何箭头功能,所以我知道Babel的输出很好. 我还尝试了Babel-Polyfill和Babel插件来转换箭头的功能. 我知道,babel-loader输出好代码,我怀疑它可能是一个插件,但是我不能只是禁用它们来测试,因为这会破坏构建. dev中使用的webpack插件: plugins: [ new webpack.DefinePlugin({ 'process.env': require('../config/dev.env') }), new webpack.HotModuleReplacementPlugin(), new webpack.NamedModule
8 2024-03-26
编程技术问答社区
对象字面中的箭头功能
我试图弄清楚为什么用window为this将对象中的箭头函数称为字面.有人可以给我一些见识吗? var arrowObject = { name: 'arrowObject', printName: () => { console.log(this); } }; // Prints: Window {external: Object, chrome: Object ...} arrowObject.printName(); 和一个按预期工作的对象: var functionObject = { name: 'functionObject', printName: function() { console.log(this); } }; // Prints: Object {name: "functionObject"} functionObject.printName(); 根据var arrowObject = { nam
18 2024-03-26
编程技术问答社区
异步箭头函数的语法
i可以将JavaScript函数标记为" async"(即,返回承诺)使用async关键字.这样: async function foo() { // Do something } 箭头函数的等效语法是什么? 解决方案 async 箭头功能看起来像这样: const foo = async () => { // do something } async 箭头函数看起来像这样的单个参数传递给它: const foo = async evt => { // do something with evt } async 箭头函数看起来像这样的多个参数传递给它: const foo = async (evt, callback) => { // do something with evt // return response with callback } 匿名表单也有效: const foo = async functio
4 2024-03-17
编程技术问答社区
用数组的JSON对象的React/JSX箭头函数.
我有以下JSON对象 const slides = [ { title: "Hello World", bullets: [ "Allows us to ... write", "Allows us to ... writez", "Allows us to ... writezz", ], slideIndex: 0, }, { title: "Hello Worldz", bullets: [ "Allows us to ... write", "Allows us to ... writez", "Allows us to ... writezz", ], slideIndex: 1, }, ]; 现在我想使用以下组件Slide.js import React from "react"; const Slide =
22 2024-03-07
编程技术问答社区
使用箭头语法的返回值
因此,对我的理解,这一点显然是错误的, return arg => arg*2 与 相同 return (arg)=>{arg*2} 我一直以为箭头功能只是句法整洁. 但是,这样做的封闭情况就无法正常工作. function addTwoDigits(firstDigit){ return (secondDigit)=>{firstDigit + secondDigit} } let closure = addTwoDigits(5); console.log(closure(5)) // Undefined 这很好 function addTwoDigitsV2(firstDigit){ return secondDigit => firstDigit + secondDigit } let closure2 = addTwoDigitsV2(10); console.log(closure2(10))// 20 解决方案
20 2024-03-07
编程技术问答社区
箭头函数是否比类似的普通(匿名)函数更有性能?
根据 mdn mdn :::/p> 箭头函数表达式是常规函数表达式的句法替代方案,尽管没有其与此,参数,超级或new.target关键字的绑定. 大概,不结合比结合更具性能. 解决方案 我的推定是没有根据的.基于以下时间,创建箭头函数不是不是比创建常规匿名函数更具性能. 常规匿名函数 let f; for (let I = 0; I
8 2024-03-07
编程技术问答社区
javascript数组过滤器的多个和条件
如何过滤具有多个匹配条件的JavaScript数组. 以下代码返回所有数据,而不仅仅是2个. 代码: this.entityTypes = codeList.Values.filter(c => c.CodeValue === 'CRD_CRE_INS' || 'CRD_EEA_BRA'); 样本JSON阵列: - const codeList.Values = [{ "CodeValue": "CRD_CRE_INS", "CodeValueDisplay": "CRD Credit Institution", }, { "CodeValue": "CRD_EEA_BRA", "CodeValueDisplay": "EEA Branch", }, { "CodeValue": "CRD_NON_EEA_BRA", "CodeValueDisplay": "Non-EEA Branch", } ]
12 2024-03-07
编程技术问答社区
反应原生的箭头函数和geoQueries
我仍在用箭头功能挣扎.我以前曾发表过这些帖子: react Arect Arect Native和全球可访问的对象 react Arect Artion Arrow函数和if语句 ,但是现在我有一个新问题,即如何与地球使用它们.我尝试了下面显示的代码: myFunction = () => { var onKeyMovedRegistration = () => geoQuery.on("key_moved", function(key, location, distance) { console.log('Test log'); if (key != this.props.userID) { arraySearchResult = findKeyInArray(key, this.props.arrayOfKeys); if (arraySearchResult !=
8 2024-03-07
编程技术问答社区
JavaScript的箭头语法。右手边的等号是什么意思?
我正在研究JavaScript语法.我偶尔会看到一种使我感到困惑的模式:一个等于箭头右侧的标志.例如,类似的东西: .then(data => myVariable = data) 我不知道该语法发生了什么.看起来它正在采用data的值并将其分配给名为myVariable的变量.有人可以解释一下吗? 解决方案 你是对的.这是"返回"作业表达式的箭头函数(没有随附的块) - 实际上,将data的值的分配给myVariable并返回右手侧,尽管在这种情况下可能不会使用右手. 在更简化的情况下: let foo = 3; function foobar(callback) { const result = callback(5); //call callback with 5 as argument console.log(result); //5 } foobar(five => foo = five); //assigns 5 to foo conso
18 2024-03-07
编程技术问答社区
如何在js中用箭头函数通过2个条件过滤对象阵列?
假设我有一个像: 的数组 const items=[{ "taskType": "type2", "taskName": "two", "id": "19d0da63-dfd0-4c00-a13a-cc822fc81298" }, { "taskType": "type1", "taskName": "two", "id": "c5385595-2104-409d-a676-c1b57346f63e" }] 我想拥有一个箭头(滤波器)函数,该功能返回所有项目,除了taskType = type2和taskname =两个.因此,在这种情况下,它只是返回第二项? 解决方案 您可以尝试在 在 const items=[{ "taskType": "type2", "taskName": "two",
16 2024-03-07
编程技术问答社区
如何创建一个唯一的json对象数组,并在一个字段上进行排序?
我如何在common id上填充以下数组,并且输出应具有唯一和最新的历史记录 在 const input = [{ "id": 134116, "user": "admin", "historyno": "134116-0" }, { "id": 134132, "user": "admin", "historyno": "134132-0" }, { "id": 134132, "user": "admin", "historyno": "134132-1" }, { "id": 134133, "user": "admin", "historyno": "134133-0" }, { "id": 134133, "user": "admin", "historyno": "134133-1" }]; let output = []; let tempId; for
10 2024-03-07
编程技术问答社区
如何将'this'与对象箭头函数绑定?
让我们假设我们有一个具有属性的对象profile name和getName方法(箭头函数). profile = { name: 'abcd', getName: () => { console.log(this.name); } } 我想通过保持箭头功能完整来调用getName方法,而 将其更改为常规功能. 如何通过调用getName()来获取输出abcd. 您可以在getName中添加表达式. call()或bind()帮助吗?如果是这样,如何? 请勿将箭头功能更改为常规功能 - 编辑 - 我只想问我们如何在对象内使用箭头功能,以反映结果,因为我们将在常规功能中获得. 这只是一个面试问题. 解决方案 而无需将其更改为常规函数,从内部功能到达name属性的唯一方法是访问exter 变量名称,即profile: 在 const profile = { name: 'abc
10 2024-03-07
编程技术问答社区
箭杆功能的Javascript承诺-替换
由于JS中对箭头功能的支持仍然很低,因此我想从以下代码段中替换它们: Promise.all([f1(), f2()]) .then(values => { f3(values); }) .catch(values => { f4(values); }); 有什么想法如何实现? 解决方案 这是我写的解决方案,旨在允许在IE11这样的无人浏览器上进行现有的基于承诺的代码工作.不是完美的,但是效果很好. CanPromise = !!window.Promise; PromiseResolve = []; PromiseReject = []; if (!CanPromise) { window.Promise = function (f) { var p = {}; p.resolve = function (result) { PromiseResolve.push(resul
2 2024-03-07
编程技术问答社区