Ответы пользователя по тегу JavaScript
  • Как импортировать useState в next.js?

    @slide13
    frontend/web-developer
    С 13й версии nextjs при использовании app роутинга компоненты по-умолчанию пытаются отрендериться на сервере, но для компонентов, которые требуют интерактивности на клиенте (например, компоненты с состоянием, кнопки, любые компоненты требующие браузерный api и т.д.) нужно добавлять директиву 'use client' в начале файла компонента, чтобы next понимал, что рендерить его надо на клиенте.

    Т.е. в вашем случае, компонент, который будет использовать useState, нужно выделить в отдельный файл и вверху файла добавить 'use client'.

    Ну и желательно почитать про это все тут вначале, либо использовать папку pages по старинке.
    Ответ написан
    Комментировать
  • Как обработать ошибку от createAsyncThunk в Redux toolkit?

    @slide13
    frontend/web-developer
    Вопрос: почему после запроса в блоке try
    await dispatch(fetchOrderCreate({...formData, type: 'pickup'}));
    Выполнение кода продолжается как ни в чем не бывало, и не попадает в блок catch.


    Потому что, если почитать документацию, то там будет написано, что createAsyncThunk всегда возвращает resolved промис, даже при ошибке. А чтобы возвращалась оригинальная ошибка нужно дополнительно вызвать unwrap:

    await dispatch(fetchOrderCreate({...formData, type: 'pickup'})).unwrap();
    Ответ написан
  • Как правильно составить типы для валидации объекта?

    @slide13
    frontend/web-developer
    Единственное, что сходу приходит в голову - это взять какой-то объект конфига за основу и сравнивать остальные с ним, а так как у нас нет явного указания какие свойства у конфига есть, то непонятно, что брать за основу. Возможно, есть какой-то более адекватный вариант, но рабочий придумал только такой:

    type CommonConfig = Record<string, any>;
    
    const createConfig = <
      Common extends CommonConfig,
      Configs extends Record<string, ProductionConfig> & {
        production: ProductionConfig;
      },
      ProductionConfig = Configs["production"] & Partial<Common>,
    >(
      common: Common,
      configs: {
        [env in keyof Configs]: Configs[env];
      }
    ) => ({});


    Т.е. мы требуем, чтобы в конфиге был конфиг "production" и все остальные конфиги сравниваем с ним, ну и плюс он может содержать опционально свойства дефолтного конфига.

    Такой вариант рабочий, но вообще, для валидации конфигов я бы взял zod
    Ответ написан
    Комментировать
  • Как исправить баг соприкосновения двух Slice в RTK?

    @slide13
    frontend/web-developer
    Потому что кое что забыли в addMatcher. Сейчас у вас оба слайса в extraReducers матчатся на все асинхронно возвращаемые через промисы экшены, поэтому данные и записываются в оба слайса Т.е. вам необходимо матчить по название thunk + статус, а не только по статусу, как пример, для option:
    вот вы создали async thunk с типом "countries/fetchCountries"
    export const fetchCountries = createAsyncThunk(
      'countries/fetchCountries',
    ...

    и в addMatcher будет тогда:
    (action) => action.type.endsWith("countries/fetchCountries/pending"),

    Ну и везде так поменяйте.
    Ответ написан
    1 комментарий
  • Почему после загрузки страницы, не рендерится контент?

    @slide13
    frontend/web-developer
    Функция обновления состояния в реакт асинхронная. На момент выполнения FillGoods массив AllGoodsArray будет пустой, т.к. setAllGoodsArray еще не будет выполнена и состояние еще не обновлено.
    Здесь же AllGoodsArray вообще не нужен, можно в FillGoods просто передать response.data в качестве параметра.
    Еще не понятно, почему некоторые переменные и функции у вас названы в стиле PascalCase, лучше придерживаться консистентности всегда
    Ответ написан
    Комментировать
  • Как изменить шаг Drag’n’Drop при mousedown?

    @slide13
    frontend/web-developer
    Изначальная проблема в том, что вы делаете range slider не стандартными способами, когда есть стандартный input с type="range"
    например,
    <input type="range" min="1" max="100" value="0" step="10">

    далее стилизуете его по вашему желанию, указываете шаг/step нужный вам и отлавливаете onchange событие
    Ответ написан
  • Как написать функцию через splice, принимающую массив и перебрасывающую первый элемент в конец?

    @slide13
    frontend/web-developer
    splice возвращает массив из удаленных элементов, соответственно, при arr.splice(0,1) будет возвращен массив [1] и чтобы получить элемент массива, нужно обратиться к нему по индексу, а так как мы удалили один элемент и вернулся он в массиве один, то обращаемся к нулевому. Т.е. в spl у нас теперь будет 1.

    ну и по условию, если предполагается использовать только splice, то функцию можно написать как-то так:
    function changeSp(arr) {
      arr.splice(arr.length, 0, ...arr.splice(0,1));
      return arr;
    }
    Ответ написан
    Комментировать
  • Почему JS-функция, останавливает выполнение после первого абзаца?

    @slide13
    frontend/web-developer
    childNodes включает не только элементы, но и тексты, комментарии, переносы строк. После парсинга p элементы находятся внутри текстовых переносов строк /n, поэтому когда производится проверка if ( e.nodeType !== Node.ELEMENT_NODE ) return; они игнорируются. Так что если требуется перебрать только элементы всегда нужно использовать children, а не childNodes. В данном случае все переносы строк буду проигнорированы и элементы p преобразуются как нужно.

    function testFn(node) {
      for (const child of node.children) {
        testFn(child);
        if ( child.nodeName !== 'LI' ) {
          child.replaceWith( ...child.childNodes );
        }
      }
    }
    Ответ написан
    2 комментария
  • Как вытащить значение по ключу из вложенного объекта?

    @slide13
    frontend/web-developer
    usersList.forEach(user => console.log(user.company.name))
    Ответ написан
    Комментировать
  • Рандомное число в диапазоне с равным шансом выпадения?

    @slide13
    frontend/web-developer
    Вот ответ с MDN

    function getRandomIntInclusive(min, max) {
      min = Math.ceil(min);
      max = Math.floor(max);
      return Math.floor(Math.random() * (max - min + 1) + min);
    }
    Ответ написан
    3 комментария
  • Почему данные из localstorage отображаются при переходе на другую страницу со 2 раза?

    @slide13
    frontend/web-developer
    Отправка запроса на сервер это асинхронная операция, а вы делаете переход на "/metric" сразу же после начала отправки запроса, не дожидаясь его выполнения. Поэтому вначале осуществляется переход на другой роут, а потом записываются данные в localStorage, следовательно они и начинают отображаться после повторного захода на "/metric"
    Ответ написан
    Комментировать
  • Почему у элемента появляется style="display: none;"?

    @slide13
    frontend/web-developer
    Ну так у вас в if вызывается метод fadeOut на классе box, а в jquery fadeout после того как opacity элемента достигнет 0 убирает его полностью как раз через установку display в none
    Ответ написан
    Комментировать
  • Связь Javascript с интернетом?

    @slide13
    frontend/web-developer
    Вам нужен сервер для этого. Я для парсинга веб страниц использовал cheerio для nodejs сервера. Соответственно, отправляете данные с инпута к себе на сервер, а дальше уже с помощь cheerio делаете запросы куда вам нужно, парсите результаты и отправляете себе на сайт обратно нужные результаты. Можно и периодически фоном нужные данные парсить и через вебсокет пушить результаты на сайт
    Ответ написан
    Комментировать
  • Как работает функция componentDidUpdate?

    @slide13
    frontend/web-developer
    1. Вы ввели "1", нажали кнопку: у родителя меняется состояние на {value: "1"}, Child обновляется первый раз
    2. componentDidUpdate не срабатывает при первом рендере, поэтому в Child просто выводится Hello!
    3. В инпуте все еще "1", вы нажали второй раз кнопку. Снова вызывается setState с {value: "1"}, но каждый вызов setState приводит к перерендеру компонента, поэтому после второго клика происходит обновление родителя и вслед за ним потомка
    4. На второй перерендер у Child срабатывает componentDidUpdate, и т.к. состояние в потомке не определено, т.е. по дефолту равно null, то срабатывает условие в if в componentDidUpdate
    5. Child обновляет свой state и записывает туда {value: "1"}, после снова обновляется, но т.к. теперь предыдущий state был равен null, а текущий {value: "1"}, то условие if в componentDidUpdate уже не выполняется
    6. Добавляете в инпуте цифру "2", нажимаете кнопку. Родитель меняет состояние на {value: "12"} и обновляется вместе с потомком
    7. И дальше ответ на ваш вопрос: у Child снова после обновления срабатывает componentDidUpdate. При этом предыдущее значение у него в state осталось то, что было записано в пункте 5 и текущее тоже равно этому же значению, т.е. в этом случае опять сработает if и в Child изменится состояние на {value: "12"}
    8. Child снова обновляется после изменения своего состояния, срабатывает componentDidUpdate, предыдущее значение состояния value выводит "1", а текущее уже "12" так что if снова не срабатывает


    Надеюсь понятно написал ) Не понятно только зачем вам в Child нужно состояние, которое дублирует пропы, так делать не надо
    Ответ написан
    3 комментария
  • Как прекратить отмену dragover на краю картинки (dragover постоянно слетает)?

    @slide13
    frontend/web-developer
    Если коротко, то dragleave всплывает от каждого дочернего элемента у дроп зоны, поэтому, в идеале, у зоны не должно быть дочерних элементов. Т.е. надо поверх картинок создать, например, полупрозрачный div, который и будет дроп зоной.

    Но, как быстрый вариант, можно добавить:
    pointer-events: none;
    для класса preview-image

    это как раз отменит эффекты указателя для всех дочерних элементов текущей дроп зоны, чтобы на них не срабатывал dragleave
    Ответ написан
    Комментировать
  • Как сделать чтобы значение прогрессбара начиналось с нужного процента?

    @slide13
    frontend/web-developer
    установить в условии определении процента дефолтный процент (10) на нулевой индекс

    index == 0 ? 10 : ...
    Ответ написан
    Комментировать
  • Как правельно поправить скрипт?

    @slide13
    frontend/web-developer
    У тебя обе функции для очистки таймера и ивентов для 1го и 2го ряда называются одинаково - flipped. Из 2х одинаковых функций выполняется только последняя. Т.е. когда наводишь на любой элемент 1го ряда срабатывает 2й flipped, который, соответственно, для 2го ряда добавляет css класс flip-card_flipped и поэтому весь второй ряд переворачивается. Что нужно будет сделать теперь, думаю, понятно.
    Ответ написан
  • Как получить данные после редактирования таблицы webix?

    @slide13
    frontend/web-developer
    Пример: https://snippet.webix.com/shi6fqo0

    В первую таблицу добавил событие onAfterEditStop

    on: {
      onAfterEditStop(state, editor) {
        if(state.value != state.old) {
          webix.message(state.value);
          webix.message(editor.row);
          webix.message(editor.column);
        } 
      }
    }

    Где,
    state.value - отредактированное значение ячейки
    editor.row - id строки
    editor.column - свойство объекта строки

    Если нужны значения сразу всех ячеек, то их можно получить через mapCells, подробнее читать тут
    Ответ написан
    Комментировать
  • Как сделать условие по переданному аргументу с консоли?

    @slide13
    frontend/web-developer
    В Vue можно определять свои переменные окружения только начинающиеся с VUE_APP_
    Ну а дальше в консоли что-то типа того:
    VUE_APP_TEST=test yarn dev (зависит от текущей ОС)
    И в приложении смотрим в process.env.VUE_APP_TEST
    Ответ написан
    Комментировать