Задать вопрос

Алексей

frontend/web-developer
Ответы

  • Как импортировать 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();
    Ответ написан
    1 комментарий
    1 комментарий

  • Как убрать подсказки (всплывающие окна) Visual Studio Code?

    @slide13
    frontend/web-developer
    Это подсказки IntelliSense по ключевым словам, введенным ранее.
    В настройках поиск по showKeywords и галку убрать
    64836b50e7b5d582583432.png
    ну или если в виде JSON:
    "editor.suggest.showKeywords": false
    Ответ написан
    1 комментарий
    1 комментарий

  • Как правильно составить типы для валидации объекта?

    @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 комментарий
    1 комментарий

  • Почему возникает ошибка Cannot perform 'get' on a proxy that has been revoked?

    @slide13
    frontend/web-developer
    Потому что в редюсере не нужно писать асинхронный код и вызывать сайд эффекты.
    А ошибку эту выводит immer, потому что вы сетите асинхронно стейт, когда сама функция редюсер уже завершилась
    Ответ написан
    2 комментария
    2 комментария

  • Что это за конструкция и где в документации найти информацию?

    @slide13
    frontend/web-developer
    Такая запись используется для того, чтобы объявить модуль в глобальном контексте, т.е. p5 переменную можно будет использовать везде в коде не импортируя ее.
    Видимо, p5 не работает как es6 модуль, по крайней мере в проекте выше.
    В доках тайпскрипта об этом варианте есть тут. И тут.
    Ответ написан
    2 комментария
    2 комментария

  • Как добавить точку при клике в react-yandex-maps?

    @slide13
    frontend/web-developer
    У компонента Map добавить событие onClick, из которого можно получить текущие координаты, сохранить их и потом на основании полученных сохраненных координат отрендерить Placemark, который будет потомком Map

    const [coordinates, setCoordinates] = useState([])
<YMaps ... >
  <Map ...
    onClick={e => setCoordinates(e.get("coords"))}
  >
  {coordinates.length && <Placemark
    geometry={coordinates}
    options={{
      zIndex: 100
    }}
  />}
  </Map>
</YMaps>


    Что-то типа того, но возможно там что-то поменялось, потому что последний раз я эту библиотеку лет 5 назад использовал.
    Ответ написан
    1 комментарий
    1 комментарий

  • Какой тип у children с переданным ref?

    @slide13
    frontend/web-developer
    На сколько я понял в React.Children.map передается ref только из оригинального компонента, forward ref там отсутствует, именно поэтому тайпскрипт и ругается, что ref не существует.

    Видел только вариант добавить ref в клонированный элемент: 

    {React.Children.map(props.children, (child, index) =>
  React.cloneElement(child, {
    ref: (ref) => (childrenRef.current[index] = ref)
  })
)}

    что в доках реакта не рекомендуется, но по крайней мере это должно работать.
    Ответ написан
    5 комментариев
    5 комментариев

  • Откуда взялся отступ?

    @slide13
    frontend/web-developer
    У .singlecontainer .bron input[type=submit]
    стоит 
    margin-left: 50%;
transform: translateX(-50%);

    соответственно, нужно центрировать кнопку другим способом
    Ответ написан
    1 комментарий
    1 комментарий

  • Как изменить стиль placeholder у input в функциональном компоненте React?

    @slide13
    frontend/web-developer
    Инлайн стили нельзя использовать для стилизации псевдо элементов. Если не хотите использовать внешний css, то можно взять css-in-js библиотеку например, styled-components или emotion
    Ответ написан
    Комментировать
    Комментировать

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

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

  • Чем заменить React.FunctionComponent?

    @slide13
    frontend/web-developer
    "Чем заменить React.FunctionComponent?" - ничем, так и использовать интерфейс FunctionComponent или тип FC.

    В конкретном коде проблема из-за отсутствия запятой в импорте, а не в типизации.

    Единственное, на будущее в 18й версии убрали children из FunctionComponent, поэтому при использовании children нужно его явно указывать в типизации пропов.
    Ответ написан
    5 комментариев
    5 комментариев

  • Почему стейт мутирует?

    @slide13
    frontend/web-developer
    Павел Орловский вы же сами в стейт записываете результат метода slice:
    state.items = state.items.slice(
        action.payload.leftBoundPage,
        action.payload.rightBoundPage
      );

    Тут slice первый раз возвращает новый массив из items от индекса leftBoundPage (0) до rightBoundPage (5, не включая его), т.е. из 10 изначальных элементов остаются первые 5 и вы перезаписываете этими элементами старые items.

    Здесь вам надо не менять items, а написать селектор, который будет возвращать часть items на основании leftBoundPage и rightBoundPage
    Ответ написан
    Комментировать
    Комментировать

  • Как изменить шаг 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 событие
    Ответ написан
    3 комментария
    3 комментария

  • Почему компонент равен undefined?

    @slide13
    frontend/web-developer
    У вас в состоянии data объект, а в setData вы передаете 2 отдельных параметра из которых используется только первый как аргумент.
    поменяйте setData на:
    setData({state, panel})
    должно заработать
    Ответ написан
    Комментировать
    Комментировать

  • Как написать функцию через 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;
}
    Ответ написан
    Комментировать
    Комментировать

  • Массив пустой, хотя я добавляю в него ID. Что не так?

    @slide13
    frontend/web-developer
    У вас в active ожидается, что id будет передаваться из компонента Universal, т.е. там должно быть onClick={() => active(id)}

    но id можно передать и сразу, тогда в Universal ничего править не надо, а внутри map сделать active={() => active(item.id)}
    Ответ написан
    Комментировать
    Комментировать

  • Почему не работает z-index у before?

    @slide13
    frontend/web-developer
    Потому что при абсолютном позиционировании свойство top указывает позицию с верхнего края ближайшего родителя вниз, а если указать отрицательное значение, то будет с верхнего края вверх. Если надо относительно нижнего края вниз на всю высоту псевдоэлемента, то можно использовать, например, bottom: - высота_псевдоэлемента_px, либо указать максимальную высоту через top: 100%, что проще.
    Ответ написан
    4 комментария
    4 комментария

  • Почему useRef работает неверно?

    @slide13
    frontend/web-developer
    Проблема не в useRef, проблема в том как работает console.log. Если в console.log передается объект, то он выводится по ссылке, в итоге получается, что когда обновляется ref, то браузер автоматом обновляет его в консоли.
    Чтобы проверить, что useRef работает как надо - достаточно вывести current значение из ref, т.е. console.log(t.current, 0)
    Если же нужно вывести именно объект на момент его логирования, то можно привести объект к строке и снова собрать в объект:
    console.log(JSON.parse(JSON.stringify(t, 0)))

    На MDN можно почитать про это
    Ответ написан
    2 комментария
    2 комментария