Вопросы по тегу: javascript

(798)

Производительность большого списка с React

Я создаю фильтруемый список с помощью React. Структура списка показана на изображении ниже.ПОМЕЩЕНИЕВот описание того, как это должно работать: Состояние находится в компоненте самого высокого уровня, компоненте Поиск. Состояние описывается следующим образом: { visible : boolean, files : array, filtered : array, query : string, currentlySelectedIndex : integer } files — потенциально очень большой массив, содержащий пути к файлам (10000 записей — правдоподобное число). filtered — это отфильтрованный массив после того, как пользователь введет не менее 2 символов. Я знаю, что это производные данные, и поэтому можно привести аргумент о сохранении их в состоянии, но это необходимо для currentlySelectedIndex который является индексом текущего выбранного элемента из отфильтрованного списка. Пользователь вводит более 2 букв в компонент Input, массив фильтруется и для каждой записи в отфильтрованном массиве отображается компонент Result* 100023* Каждый компонент Результат отображает полный путь, который частично соответствует запросу, а часть пути с частичным совпадением выделена. Например, DOM компонента Result, если пользователь ввел «le», будет выглядеть примерно так: это/является/файломфайл/путь Если пользователь нажимает клавиши вверх или вниз, когда компонент Input сфокусирован, currentlySelectedIndex изменяется на основе массива filtered. Это приводит к тому, что компонент Result, соответствующий индексу, помечается как выбранный, вызывая повторный рендеринг ПРОБЛЕМАПервоначально я протестировал это с достаточно небольшим массивом из файлов, используя разрабатываемую версию React, и все работало нормально.Проблема возникла, когда мне пришлось иметь дело с массивом files размером до 10000 записей. Ввод 2 букв в поле ввода привел бы к созданию большого списка, и когда я нажимал клавиши вверх и вниз для навигации по нему, он сильно тормозил.Сначала у меня не было определенного компонента для элементов Result, и я просто составлял список на лету, при каждом рендеринге компонента Search, как таковой:results = this.state.filtered.map(function(file, index) { var start, end, matchIndex, match = this.state.query; matchIndex = file.indexOf(match); start = file.slice(0, matchIndex); end = file.slice(matchIndex + match.length); return ( {start} {match} {end} ); }.bind(this)); Как вы понимаете, каждый раз, когда currentlySelectedIndex изменялся, это вызывало повторную визуализацию, и список каждый раз создавался заново. Я думал, что, поскольку я установил значение key для каждого элемента li, React избежит повторного рендеринга каждого другого элемента li, у которого нет его className измениться, но видимо это было не так.В итоге я определил класс для элементов Result, где он явно проверяет, должен ли каждый элемент Result повторно отображаться на основе того, был ли он выбран ранее и на основе текущего пользовательский ввод:var ResultItem = React.createClass({ shouldComponentUpdate : function(nextProps) { if (nextProps.match !== this.props.match) { return true; } else { return (nextProps.selected !== this.props.selected); } }, render : function() { return ( {this.props.children} ); } }); И список теперь создан как таковой: results = this.state.filtered.map(function(file, index) { var start, end, matchIndex, match = this.state.query, selected; matchIndex = file.indexOf(match); start = file.slice(0, matchIndex); end = file.slice(matchIndex + match.length); selected = (index === this.state.currentlySelected) ? true : false return ( {start} {match} {end} ); }.bind(this)); } Это улучшило производительность немного, но все равно недостаточно. Дело в том, что когда я тестировал производственную версию React, все работало плавно, без задержек.НИЖНЯЯ ЛИНИЯТакое заметное расхождение между разрабатываемой и производственной версиями React нормально?Я понимаю/делаю что-то не так, когда думаю о том, как React управляет списком? ОБНОВЛЕНИЕ 14-11-2016Я нашел эту презентацию Майкла Джексона, где он решает проблему, очень похожую на эту: https://youtu.be/7S8v8jfLb1Q?t=26m2sРешение очень похоже на решение, предложенное Аскаровым Бекнаром ответ, нижеОБНОВЛЕНИЕ 14-4-2018Поскольку это, по-видимому, популярный вопрос, и с тех пор, как был задан первоначальный вопрос, дела пошли дальше, хотя я рекомендую вам посмотреть видео по ссылке выше, чтобы получить представление о виртуальном макете, я также рекомендую вам использовать библиотеку React Virtualized, если вы не хотите заново изобретать велосипед.
D

Dimitris Karagiannis

6 лет назад

Ответов: 9

Состояние как массив объектов и объект с ключом по идентификатору

В главе Проектирование формы состояниядокументация предлагает хранить ваше состояние в объекте с ID: Сохраняйте каждую сущность в объекте с идентификатором в качестве ключа и используйте идентификаторы для ссылки на нее из других сущностей или списков. Они продолжают говорить Подумайте о состоянии приложения как о базе данных. Я работаю над формой состояния для списка фильтров, некоторые из которых будут открыты (они отображаются во всплывающем окне) или имеют выбранные параметры. Когда я прочитал «Думайте о состоянии приложения как о базе данных», я подумал о том, чтобы думать о них как об ответе JSON, поскольку он будет возвращен из API (который сам поддерживается базой данных).Я думал об этом как[{ id: '1', name: 'View', open: false, options: ['10', '11', '12', '13'], selectedOption: ['10'], parent: null, }, { id: '10', name: 'Time & Fees', open: false, options: ['20', '21', '22', '23', '24'], selectedOption: null, parent: '1', }] Однако в документации предлагается формат, больше похожий на{ 1: { name: 'View', open: false, options: ['10', '11', '12', '13'], selectedOption: ['10'], parent: null, }, 10: { name: 'Time & Fees', open: false, options: ['20', '21', '22', '23', '24'], selectedOption: null, parent: '1', } } Теоретически это не имеет значения, если данные сериализуемы (под заголовком "Состояние").Поэтому я с удовольствием использовал подход с массивом объектов, пока не написал свой редьюсер.При подходе с ключом объекта по идентификатору (и свободном использовании синтаксиса распространения) часть редуктора OPEN_FILTER становитсяswitch (action.type) { case OPEN_FILTER: { return { ...state, { ...state[action.id], open: true } } } В то время как подход с массивом объектов более подробный (и зависит от вспомогательной функции)switch (action.type) { case OPEN_FILTER: { // relies on getFilterById helper function const filter = getFilterById(state, action.id); const index = state.indexOf(filter); return state .slice(0, index) .concat([{ ...filter, open: true }]) .concat(state.slice(index + 1)); } ... Итак, у меня три вопроса:1) Является ли простота редуктора мотивацией для использования подхода с ключом объекта по идентификатору? Есть ли другие преимущества в этой форме состояния?и2) Похоже, что подход с ключом объекта по идентификатору усложняет работу со стандартным вводом/выводом JSON для API. (Вот почему я в первую очередь выбрал массив объектов.) Итак, если вы выберете этот подход, вы просто используете функцию для преобразования его туда и обратно между форматом JSON и форматом формы состояния? Это кажется неуклюжим. (Хотя, если вы поддерживаете этот подход, является ли частью ваших рассуждений то, что он менее неуклюж, чем редуктор массива объектов выше?)и3) Я знаю, что Дэн Абрамов разработал редукцию, чтобы теоретически быть независимым от структуры данных и состояния (как было предложено «По соглашению, состояние верхнего уровня является объектом или какой-либо другой коллекцией ключ-значение, такой как Карта, но технически это может быть любой тип, " подчеркнуто мной). Но, учитывая вышеизложенное, просто «рекомендуется» сохранить его как объект с ключом по идентификатору, или есть другие непредвиденные болевые точки, с которыми я столкнусь, используя массив объектов, которые делают его таким, что я должен просто прервать это спланировать и попытаться придерживаться объекта с ID?
n

nickcoxdotme

6 лет назад

Ответов: 3

Чтение тела обещания Fetch

У меня есть следующая экспресс-конечная точка для загрузки в облачное хранилище Google. Он отлично работает, и ответ от API Google дает мне уникальное имя файла, которое я хочу передать обратно в свой внешний интерфейс:app.post('/upload', (req, res) => { var form = new formidable.IncomingForm(), files = [], fields = []; form .on('field', function(field, value) { fields.push([field, value]); }) .on('file', function(field, file) { files.push([field, file]); }) .on('end', function() { console.log('-> upload done'); }); form.parse(req, function(err, fields, files){ var filePath = files.file.path; bucket.upload(filePath, function(err, file, apiResponse){ if (!err){ res.writeHead(200, {'content-type': 'text/plain'}); res.end("Unique File Name:" + file.name); }else{ res.writeHead(500); res.end(); } }); }); return; }); Я достигаю этой конечной точки, вызывая короткую функцию, которая передает ей файл:function upload(file) { var data = new FormData(); data.append('file', file); return fetch(`upload`,{ method: 'POST', body: data }); } const Client = { upload }; export default Client; Эта функция вызывается из моего внешнего интерфейса следующим образом:Client.upload(this.file).then((data) => { console.log(data); }); Этот окончательный console.log(data) регистрирует ответ на консоль. Однако я нигде не вижу ответа, который я написал в ("Уникальное имя файла:" + имя_файла)Как я могу получить эту информацию из тела ответа на стороне клиента?data выглядит так, когда я запускаю console.log:Это ответ, который я получаю, когда отправляю файл на свою конечную точку с помощью Postman:
q

quicklikerabbit

5 лет назад

Ответов: 4

Использование async/await внутри функционального компонента React

Я только начинаю использовать React для проекта, и мне очень сложно включить асинхронную/ожидающую функциональность в один из моих компонентов.У меня есть асинхронная функция с именем fetchKey, которая получает ключ доступа от API, который я обслуживаю через AWS API Gateway:const fetchKey = async authProps => { try { const headers = { Authorization: authProps.idToken // using Cognito authorizer }; const response = await axios.post( "https://MY_ENDPOINT.execute-api.us-east-1.amazonaws.com/v1/", API_GATEWAY_POST_PAYLOAD_TEMPLATE, { headers: headers } ); return response.data.access_token; } catch (e) { console.log(`Axios request failed! : ${e}`); return e; } }; Я использую тему пользовательского интерфейса React Material и отказываюсь использовать один из его шаблонов Dashboard. К сожалению, в шаблоне Dashboard используется функциональный компонент без сохранения состояния:const Dashboard = props => { const classes = useStyles(); const token = fetchKey(props.auth); console.log(token); return ( ... rest of the functional component's code Результатом моего console.log(токена) является обещание, которое ожидается, но скриншот в моем браузере Google Chrome несколько противоречив - он находится в ожидании или решен? Во-вторых, если я попробую вместо token.then((данные, ошибка)=> console.log(данные, ошибка)), я получу undefined для обеих переменных. Мне кажется, это указывает на то, что функция еще не завершена и, следовательно, не разрешила никаких значений для data или error. Тем не менее, если я попытаюсь поставить const Dashboard = async props => { const classes = useStyles(); const token = await fetchKey(props.auth); React сильно жалуется:> react-dom.development.js:57 Uncaught Invariant Violation: Objects are > not valid as a React child (found: [object Promise]). If you meant to > render a collection of children, use an array instead. > in Dashboard (at App.js:89) > in Route (at App.js:86) > in Switch (at App.js:80) > in div (at App.js:78) > in Router (created by BrowserRouter) > in BrowserRouter (at App.js:77) > in div (at App.js:76) > in ThemeProvider (at App.js:75) Теперь я буду первым, кто заявит, что у меня недостаточно опыта, чтобы понять, что происходит с этим сообщением об ошибке. Если бы это был традиционный компонент класса React, я бы использовал метод this.setState для установки какого-то состояния, а затем пошел бы своим веселым путем. Однако у меня нет такой опции в этом функциональном компоненте.Как включить асинхронную/ожидающую логику в мой функциональный компонент React?Изменить: Так что я просто скажу, что я идиот. Фактически возвращаемый объект ответа не response.data.access_token. Это было response.data.Item.access_token. Дох! Вот почему результат возвращался как неопределенный, хотя фактическое обещание было разрешено.
Y

Yu Chen

2 года назад

Ответов: 4

Могу ли я добавить ключевую опору к фрагменту React?

Я генерирую dl в React: { highlights.map(подсветка => { const count = text.split(highlight).length - 1; возвращение ( <> {highlight} {count} ); }) } Это дает мне предупреждение: Предупреждение: каждый дочерний элемент в списке должен иметь уникальный ключевой реквизит. Это удалит предупреждение, но не сгенерирует нужный мне HTML: { highlights.map(подсветка => { const count = text.split(highlight).length - 1; возвращение ( {выделение {количество ); }) } И я не могу добавить реквизит key к фрагменту (<> ).Как это обойти?Я использую React 16.12.0.
s

sdgfsdh

2 года назад

Ответов: 2

Сброс стека навигации для главного экрана (React Navigation и React Native)

У меня проблема с навигацией React Navigation и React Native. Речь идет о сбросе навигации и возврате на главный экран.Я создал StackNavigator внутри DrawerNavigator, и навигация между главным экраном и другими экранами работает. Но проблема в том, что стек навигации растет и растет. Я не знаю, как удалить экран из стека.Например, при переходе с начального экрана на экран настроек, затем на экран ввода и, наконец, снова на начальный экран, начальный экран дважды находится в стеке. Кнопкой назад не выхожу из приложения, а опять на экран входа.При повторном нажатии кнопки «Домой» сброс стека был бы замечательным, но я не знаю, как это сделать.Здесь кто-то пытался помочь другому человеку с похожей проблемой, но решение не сработало для меня.const Stack = StackNavigator({ Home: { screen: Home }, Entry: { screen: Entry }, Settings: { screen: Settings } }) export const Drawer = DrawerNavigator({ Home: { screen: Stack }}, { contentComponent: HamburgerMenu } ) А это простой пример экрана ящикаexport default class HamburgerMenu extends Component { render () { return { this.props.navigation.navigate('Home')}}> {I18n.t('home')} { this.props.navigation.navigate('Settings')}}> {I18n.t('settings')} { this.props.navigation.navigate('Entry')}}> {I18n.t('entry')} } } Надеюсь, вы сможете мне помочь. Это неотъемлемая часть навигации, и решение было бы отличным!
D

Daniel

5 лет назад

Ответов: 15

Является ли innerHTML асинхронным?

Надеюсь, я не выставлю себя дураком, но я пытаюсь понять, что происходит в этих двух строчках кода:document.body.innerHTML = 'something'; alert('something else'); Я наблюдаю, что предупреждение появляется до того, как HTML был обновлен (или, может быть, он был, но страница не была обновлена/перекрашена/что-то еще)Проверьте это codepen, чтобы понять, что я имею в виду.Обратите внимание, что даже установка alert в setTimeout(..., 0) не помогает. Похоже, для innerHTML требуется больше циклов событий, чтобы фактически обновить страницу.РЕДАКТИРОВАТЬ:Забыл упомянуть, что использую Chrome и не проверял другие браузеры. Похоже, это видно только в Chrome. Тем не менее, мне все еще интересно, почему это происходит.
a

apieceofbart

5 лет назад

Ответов: 3

Почему значение typeof null изменяется внутри цикла?

Выполнение этого кода в консоли Chrome: функция foo() { возвращаемый тип null === 'undefined'; } for(var i = 0; i должно быть напечатано 1000 раз false, но на некоторых машинах будет напечатано false для определенного количества итераций, затем true для остальных.Почему это происходит? Это просто ошибка?
A

Agos

6 лет назад

Ответов: 4

Lodash: как выполнить сортировку коллекции без учета регистра с помощью orderBy?

Я проверил этот ответ, но для достижения того же результата, то есть сортировки без учета регистра, мне нужно использовать orderBy вместо sortBy, посколькудает возможность указать порядок сортировки.Единственный способ добиться этого — создать клонированный «средний» массив, преобразованный в нижний регистр имя :const users = [ { name: 'A', age: 48 }, { name: 'B', age: 34 }, { name: 'b', age: 40 }, { name: 'a', age: 36 } ]; let lowerCaseUsers = _.clone(users); lowerCaseUsers = lowerCaseUsers.map((user) => { user.name = user.name.toLowerCase(); return user; }); const sortedUsers = _.orderBy(lowerCaseUsers, ['name'], ['desc']); console.log(sortedUsers); Это кажется очень дорогим, и это будет еще сложнее с несколькими сортировками и именами динамических свойств.Есть ли идея получше?Вот плункер: https://plnkr.co/edit/i1ywyxjFctuNfHtPTcgG
W

WhiteEleven

6 лет назад

Ответов: 3

Bootstrap 4 Ввод файлов

Я борюсь с файловым браузером bootstrap 4. Если я использую custom-file-control, я все время буду видеть Choose file value. https://v4-alpha.getbootstrap.com/components/forms/#file-браузерЯ хотел бы изменить значение выбора файла после того, как файл был выбран. Это значение на самом деле скрыто в css .custom-file-control:lang(en)::after, и я не знаю, как получить к нему доступ и изменить его в javascript. Я могу получить значение выбранного файла следующим образом:document.getElementById("exampleInputFile").value.split("\\").pop(); не нужно менять .custom-file-control:lang(en)::after { content: "Choose file..."; } как-тоссылка: http://codepen.io/Matoo125/pen/LWobNp
M

Matej Vrzala M4

5 лет назад

Ответов: 17

Добавить пару ключ-значение ко всем объектам в массиве

Я хотел добавить параметр ключ:значение ко всем объектам в массиве.например: var arrOfObj = [{name: 'eve'},{name:'john'},{name:'jane'}]; Теперь я хотел добавить новый параметр isActive ко всем объектам, чтобы результирующий массив выглядел так.например: [{ name: 'eve', isActive: true }, { name: 'john', isActive: true }, { name: 'jane', isActive: true }] Я всегда могу прокрутить массив и вставить пару ключ-значение. Но мне было интересно, есть ли лучший способ сделать это
S

Shrujan Shetty

5 лет назад

Ответов: 12

Javascript переназначает переменную let с деструктурированием

В моем приложении React я использую руководство по стилю eslint от airbnb, которое выдает ошибку, если я не использую деструктурирование.В приведенной ниже ситуации я сначала использую let для присвоения двум переменным широта и долгота координатам первого элемента в массиве местоположений. объекты. Затем я пытаюсь использовать деструктурирование, чтобы переназначить их значения, если пользователь предоставил мне доступ к их местоположению.let latitude = locations[0].coordinates[1]; let longitude = locations[0].coordinates[0]; if (props.userLocation.coords) { // doesn't work - unexpected token { latitude, longitude } = props.userLocation.coords; // causes linting errors // latitude = props.userLocation.coords.latitude; // longitude = props.userLocation.coords.longitude; } Разрушение структуры оператора if приводит к ошибке неожиданный токен.Переназначение переменных по старинке вызывает ошибку ESlint: Use object destructuring.
P

Phil Mok

4 года назад

Ответов: 1

Фигурные скобки (скобки) в инструкции Node.js 'require'

Я пытаюсь понять разницу между двумя операторами «require» ниже.В частности, какова цель { }, обернутых вокруг ipcMain?const electron = require('electron') const {ipcMain} = require('electron') Кажется, что они оба присваивают содержимое модуля electron, но, очевидно, работают по-разному.Кто-нибудь может пролить свет?
A

AproposArmadillo

5 лет назад

Ответов: 2

Влияние const, let и var на производительность JavaScript v8?

Независимо от функциональных различий, оказывает ли использование новых ключевых слов let и const какое-либо общее или конкретное влияние на производительность по сравнению с var?После запуска программы:function timeit(f, N, S) { var start, timeTaken; var stats = {min: 1e50, max: 0, N: 0, sum: 0, sqsum: 0}; var i; for (i = 0; i .. Мои результаты были следующими:ctl = {"min":101,"max":117,"mean":108.34,"spread":4.145407097016924} con = {"min":107,"max":572,"mean":435.7,"spread":169.4998820058587} var = {"min":103,"max":608,"mean":439.82,"spread":176.44417700791374} Однако приведенное здесь обсуждение указывает на реальный потенциал различий в производительности при определенных сценариях: https://esdiscuss.org/topic/performance-concern-with-let-const
s

sean2078

5 лет назад

Ответов: 5

Что такое «тип экспорта» в Typescript?

Я заметил следующий синтаксис в Typescript.export type feline = typeof cat; Насколько мне известно, тип не является встроенным базовым типом, а также интерфейсом или классом. На самом деле это больше похоже на синтаксис псевдонимов, но я не могу найти ссылку, чтобы проверить свою догадку.Так что же означает приведенное выше утверждение?
h

hackjutsu

5 лет назад

Ответов: 1

Обновление Angular 10 — исправление зависимостей CommonJS или AMD может привести к отказу от оптимизации

Я пытаюсь обновить приложение Angular 9 до версии Angular 10, но после обновления получаю предупреждение нижеWARNING in calendar.reducer.ts depends on lodash/keys. CommonJS or AMD dependencies can cause optimization bailouts. Я добавил строку ниже в свой файл angular.json, но проблема не решена"allowedCommonJsDependencies": ["lodash"] Как исправить указанную выше проблему.
r

rrr

2 года назад

Ответов: 1

Реагировать на разрыв строки отображения из сохраненной текстовой области

Использование Facebook Реакция. На странице настроек у меня есть многострочное поле textarea, где пользователь может вводить многострочный текст (в моем случае это адрес). Когда я пытаюсь отобразить адрес, что-то вроде {адрес}, он не показывает разрывы строк и все находится в одной строке.{address} Есть идеи, как это решить?
d

denislexic

6 лет назад

Ответов: 7

Ошибка: напишите EPROTO 34557064: ошибка: 100000f7: подпрограммы SSL: OPENSSL_internal: WRONG_VERSION_NUMBER:../../ Third_Party/boringssl/src/ssl/tls_record.cc:242:

Проблема заключалась в том, что я пытался выполнить POST на https, когда этот API на самом деле поддерживает только HTTP. Просто оставьте это как примечание для других людей, которые могут столкнуться с той же проблемой.Любая помощь приветствуется
A

Ayeen M Khan

2 года назад

Ответов: 2

кнопка реакции на странице перенаправления кликов

Я работаю над веб-приложением, используя React и bootstrap. Когда дело доходит до применения кнопки onClick, мне трудно перенаправить мою страницу на другую. если после href я не могу перейти на другую страницу.Итак, не могли бы вы сказать мне, есть ли необходимость использовать реагирующую навигацию или что-то еще для навигации по странице с помощью Button onClick ?import React, { Component } from 'react'; import { Button, Card, CardBody, CardGroup, Col, Container, Input, InputGroup, InputGroupAddon, InputGroupText, Row, NavLink } from 'reactstrap'; class LoginLayout extends Component { render() { return ( ... Login Forgot password? ... ); } }
R

Raju yourPepe

4 года назад

Ответов: 15

Как «ждать» двух наблюдаемых в RxJS

В моем приложении есть что-то вроде:this._personService.getName(id) .concat(this._documentService.getDocument()) .subscribe((response) => { console.log(response) this.showForm() }); //Output: // [getnameResult] // [getDocumentResult] // I want: // [getnameResult][getDocumentResult] Затем я получаю два отдельных результата: сначала _personService, а затем _documentService. Как я могу дождаться обоих результатов перед вызовом this.showForm() для завершения, а затем манипулировать результатами каждого из них.
g

gog

5 лет назад

Ответов: 8

Активная ссылка с React-Router?

Я пробую React-Router (v4), и у меня возникают проблемы с запуском Nav, чтобы одна из Linkбыла active. Если я нажму на любой из тегов Link, активный материал начнет работать. Однако я бы хотел, чтобы Home Link был активен, как только приложение запускается, так как это компонент, который загружается по маршруту /. Есть ли способ сделать это?Вот мой текущий код:const Router = () => ( Home {/* I want this to start off as active */} About )
S

Saad

5 лет назад

Ответов: 2

Вызов функции по событию клика в Angular 2

Как объявить функцию внутри компонента (машинописный текст) и вызвать ее по событию клика в Angular 2? Ниже приведен код для той же функциональности в Angular 1, для которой мне требуется код Angular 2: //контроллерapp.controller('myCtrl', ['$scope', function($cope) { $scope.myFunc= { console.log("function called"); }; }]);
A

Azhar Khan

5 лет назад

Ответов: 5

Как определить установленную версию вебпака

Особенно при переходе с webpack v1 на v2 было бы важно программно определить, какая webpack версия установлена, но я не могу найти соответствующий API.
d

doberkofler

5 лет назад

Ответов: 7

Vuejs и Vue.set(), обновить массив

Я новичок в Vuejs. Что-то сделал, но не знаю, насколько это просто/правильно.что я хочуМне нужно несколько дат в массиве и обновить их по событию. Сначала я попробовал Vue.set, но ничего не вышло. Теперь после изменения моего элемента массива:this.items[index] = val; this.items.push(); Я ничего не нажимаю() в массив, и он будет обновляться.. Но иногда последний элемент каким-то образом будет скрыт... Я думаю, что это решение немного хакерское, как я могу сделать его стабильным?Простой код здесь: новый Vue({ эль: '#приложение', данные: { f: 'ДД-ММ-ГГГГ', Предметы: [ "03.10.2017", "12-03-2017" ] }, методы: { cha: function(index, item, what, count) { console.log(элемент + " индекс > " + индекс); val = момент(this.items[index], this.f).add(count, what).format(this.f); this.items[индекс] = значение; this.items.push(); console.log("Длина записи: " + this.items.length); } } }) ул { тип стиля списка: нет; } - день {{ пункт }} + день
J

Johan Hoeksma

5 лет назад

Ответов: 5

Babel 7 - ReferenceError: regeneratorRuntime не определен

У меня есть приложение, которое является серверной частью узла и интерфейсом реагирования.Я получаю следующую ошибку, когда пытаюсь собрать/запустить приложение узла.Узел: v10.13.0Ошибка: расстояние/index.js:314 regeneratorRuntime.mark (функция _callee (productId) { ^ ReferenceError: regeneratorRuntime не определен .babelrc{ "presets": [ [ "@babel/preset-env", { "targets": { "node": "current" }, } ], "@babel/preset-react"], "plugins": [ "@babel/plugin-proposal-class-properties" ] } webpack.config.js{ mode: "development", entry: "./src/index.js", target: "node", externals: [nodeExternals()], // in order to ignore all modules in node_modules folder stats: { colors: true }, devtool: "source-map", output: { path: path.resolve(__dirname, "dist"), filename: "index.js", sourceMapFilename: "index.js.map" }, module: { rules: [ { enforce: "pre", test: /\.js$/, exclude: /node_modules/, loader: "eslint-loader", }, { test: /\.m?js$/, exclude: /(node_modules|bower_components)/, use: { loader: "babel-loader", options: { presets: ["@babel/preset-env"] } } } ], }, node: { __dirname: false, __filename: false, }, "plugins": [ new CleanWebpackPlugin(), new WebpackShellPlugin({ onBuildStart: [], onBuildEnd: ["nodemon dist/index.js"] }), ] }, package.json "dependencies": { "connect": "^3.6.6", "cors": "^2.8.5", "dotenv": "^6.1.0", "express": "^4.16.4", "hellojs": "^1.17.1", "i18n-iso-countries": "^3.7.8", "morgan": "^1.9.1", "react": "^16.6.3", "react-dom": "^16.6.3", "request": "^2.88.0", "request-promise-native": "^1.0.5", "serve-static": "^1.13.2", "vhost": "^3.0.2" }, "devDependencies": { "@babel/cli": "^7.1.5", "@babel/core": "^7.1.6", "@babel/plugin-proposal-class-properties": "^7.1.0", "@babel/preset-env": "^7.1.6", "@babel/preset-react": "^7.0.0", "babel-eslint": "^10.0.1", "babel-loader": "^8.0.4", "clean-webpack-plugin": "^1.0.0", "copy-webpack-plugin": "^4.6.0", "css-loader": "^1.0.1", "eslint": "^5.9.0", "eslint-config-google": "^0.10.0", "eslint-loader": "^2.1.1", "eslint-plugin-react": "^7.11.1", "extract-loader": "^3.0.0", "file-loader": "^2.0.0", "node-sass": "^4.10.0", "sass-loader": "^7.1.0", "style-loader": "^0.23.1", "webpack": "^4.26.0", "webpack-cli": "^3.1.2", "webpack-node-externals": "^1.7.2", "webpack-shell-plugin": "^0.5.0" }
K

Kay

3 года назад

Ответов: 7

Как вызвать несколько функций с помощью @click в vue?

Вопрос:Как вызвать несколько функций одним щелчком мыши? (иначе v-on:click)?Я пытался Разделить функции точкой с запятой: ; Используйте несколько @click: * 100013*; а как правильно это сделать?P.S.: Всегда могу сделать function fn3 (args) { fn1(args); fn2(args); } Но иногда это неприятно.
S

Sergei Panfilov

5 лет назад

Ответов: 17

Машинописный текст: не найдена сигнатура индекса с параметром типа «строка» для типа «{ «A»: строка; }

У меня есть ванильный код javascript, который принимает ввод строки, разбивает строку на символы, а затем сопоставляет эти символы с ключом объекта.DNATranscriber = { "G":"C", "C": "G", "T": "A", "A": "U" } function toRna(sequence){ const sequenceArray = [...sequence]; const transcriptionArray = sequenceArray.map(character =>{ return this.DNATranscriber[character]; }); return transcriptionArray.join(""); } console.log(toRna("ACGTGGTCTTAA")); //Returns UGCACCAGAAUU Это работает, как и ожидалось. Теперь я хотел бы преобразовать это в машинопись.class Transcriptor { DNATranscriber = { G:"C", C: "G", T: "A", A: "U" } toRna(sequence: string) { const sequenceArray = [...sequence]; const transcriptionArray = sequenceArray.map(character =>{ return this.DNATranscriber[character]; }); } } export default Transcriptor Но я получаю следующую ошибку. Элемент неявно имеет тип "любой", поскольку выражение типа "строка" >не может использоваться для индексации типа "{ "A": строка; }'. Не найдена сигнатура индекса с параметром типа "строка" для типа >'{ "A": строка; }'.ts(7053) Я думал, что проблема в том, что мне нужно, чтобы ключ объекта был строкой. Но преобразовать их в строки не получилось.DNATranscriber = { "G":"C", "C": "G", "T": "A", "A": "U" } Меня это очень смущает. В нем говорится, что для моего объекта не существует индексной подписи с типом строки. Но я уверен, что это так. Что я делаю не так?Изменить. Я решил эту проблему, присвоив объекту DNATranscriber тип any.DNATranscriber: any = { "G":"C", "C":"G", "T":"A", "A":"U" }
o

onTheInternet

3 года назад

Ответов: 18

Как издеваться над функциями в том же модуле с помощью Jest?

Как лучше всего правильно сымитировать следующий пример?Проблема в том, что после времени импорта foo сохраняет ссылку на исходный незашифрованный bar.module.js:export function bar () { return 'bar'; } export function foo () { return `I am foo. bar is ${bar()}`; } module.test.js:import * as module from '../src/module'; describe('module', () => { let barSpy; beforeEach(() => { barSpy = jest.spyOn( module, 'bar' ).mockImplementation(jest.fn()); }); afterEach(() => { barSpy.mockRestore(); }); it('foo', () => { console.log(jest.isMockFunction(module.bar)); // outputs true module.bar.mockReturnValue('fake bar'); console.log(module.bar()); // outputs 'fake bar'; expect(module.foo()).toEqual('I am foo. bar is fake bar'); /** * does not work! we get the following: * * Expected value to equal: * "I am foo. bar is fake bar" * Received: * "I am foo. bar is bar" */ }); }); Можно изменить:export function foo () { return `I am foo. bar is ${bar()}`; } до:export function foo () { return `I am foo. bar is ${exports.bar()}`; } но, на мой взгляд, это довольно некрасиво делать везде.
M

Mark

5 лет назад

Ответов: 9

Как импортировать изображение (.svg, .png) в компонент React

Я пытаюсь импортировать файл изображения в один из моих реагирующих компонентов. У меня есть настройка проекта с веб-пакетомВот мой код компонента import Diamond from '../../assets/linux_logo.jpg'; export class ItemCols extends Component { render(){ return ( ) } } Вот структура моего проекта.Я настроил файл webpack.config.js следующим образом { test: /\.(jpg|png|svg)$/, loader: 'url-loader', options: { limit: 25000, }, }, { test: /\.(jpg|png|svg)$/, loader: 'file-loader', options: { name: '[path][name].[hash].[ext]', }, }, ПС. Я могу получить изображение из любого другого удаленного источника, но не локально сохраненного изображения. Консоль JavaScript также не дает мне никаких ошибок. Пожалуйста, что-нибудь поможет. Я новичок в реакции и не могу понять, что я делаю не так.
S

Shadid

5 лет назад

Ответов: 11

Чтение заголовков ответа с помощью Fetch API

Я использую расширение Google Chrome с разрешениями для "*://*/*" и пытаюсь переключиться с XMLHttpRequest на Fetch API.Расширение хранит введенные пользователем данные для входа в систему, которые раньше помещались непосредственно в вызов XHR open() для аутентификации HTTP, но в Fetch больше не могут использоваться напрямую в качестве параметра. Для HTTP Basic Auth обойти это ограничение тривиально, так как вы можете вручную установить заголовок авторизации:fetch(url, { headers: new Headers({ 'Authorization': 'Basic ' + btoa(login + ':' + pass) }) } }); HTTP Digest Auth однако требует большей интерактивности; вам нужно прочитать параметры, которые сервер отправляет вам с ответом 401, чтобы создать действительный токен авторизации. Я попытался прочитать поле заголовка ответа WWW-Authenticate с помощью этого фрагмента:fetch(url).then(function(resp) { resp.headers.forEach(function(val, key) { console.log(key + ' -> ' + val); }); } Но все, что я получаю, это вывод:content-type -> text/html; charset=iso-8859-1 Что само по себе правильно, но согласно инструментам разработчика Chrome по-прежнему отсутствует еще около 6 полей. Если я использую resp.headers.get("WWW-Authenticate") (или любое другое поле в этом отношении), я получаю только null.Есть ли шанс получить доступ к другим полям с помощью Fetch API?
j

jules

5 лет назад

Ответов: 7

2022 WebDevInsider