Ответы пользователя по тегу React
  • Как исправить ошибку Property 'item' does not exist on type 'Record'?

    Aetae
    @Aetae Куратор тега TypeScript
    Тлен
    Во-первых: как верно заметил YavaDev: classes[item].
    Во-вторых: только вручную, на свой страх и риск:
    for(let item in classes) {
        classes[item as keyof typeof classes] = 'page'+item
    }
    В typescript специально не добавили автоматическую типизацию ключей оставив просто string, так как из-за его структурной природы нельзя наверняка сказать, есть ли в полученном объекте(или его прототипе) ещё какие-то ключи, кроме тех, что указаны в его типе, и, соответственно, нельзя быть уверенным, что ничего не сломается.
    Ответ написан
    Комментировать
  • Фильтрация вложенных данных React?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    1. В любой строке встречается пустая строка, по этому такой поиск выдаёт все значения.
    2. map складывает в выходной массив результат переданной функции. Поскольку она у вас возвращает отфильтрованный массив items, то в итоге у вас получается массив массивов items. Если вам нужно, чтоб возвращались категории - возвращайте категории.

    Ну и дважды одну и ту же работу делать не надо, можно обойтись одним reduce:
    сonst filterData = filter(arr, input.value);
    
    interface Category {
      category: string;
      list: Array<{
        item: string;
      }>;
    }
    
    function filter<T extends Category>(data: T[], value: string): T[] {
      if (!value) return data.slice(); // или [] если при пустом value нужен пустой массив
      value = value.toLowerCase();
      
      return data.reduce((result, category) => {
        if(category.category.toLowerCase().includes(value)) {
          result.push(category);
        } else {
          const list = category.list.filter(({ item }) => item.toLowerCase().includes(value));
          if (list.length) {
            result.push({
              ...category,
              list
            });
          }
        }
        return result;
      }, [] as T[])
    }
    Ответ написан
    Комментировать
  • Почему немогу взять данные со своего localhost .?

    Aetae
    @Aetae
    Тлен
    Ответ на вопрос: потому что порты разные. Разные порты - разные сайты.
    Если это вам нужно для разработки, то следует просто проксировать все запросы на бэк будто они локальные(ведь в проде так и будет наверняка).
    Если использовали create react app, то тут написано как это сделать. (просто добавить "proxy": "http://localhost:8000", в package.json)
    Ответ написан
    Комментировать
  • Какой тип указать для children.current у TS?

    Aetae
    @Aetae Куратор тега TypeScript
    Тлен
    Возможно ак:
    const {current}: {current: HTMLUListElement} = children;

    или так:
    const current = children.current as HTMLUListElement;

    Вы же задаёте тип не current, а всего объекта.

    P.S. Про ts-ignore забудьте.
    Ответ написан
    Комментировать
  • Как решить эту проблему с if/else?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    В localStorage хранятся только строки. Если вы делаете так localStorage.setItem('token', false), то при localStorage.getItem('token') вы получаете не '', а результат приведения false к строке, т.е. 'false'.
    Впрочем false !== '' - тоже истина, потому что !== сравнение без приведения типов.
    Ответ написан
    Комментировать
  • Как подключить ESLint к проекту?

    Aetae
    @Aetae Куратор тега TypeScript
    Тлен
    Должно быть очевидно из сообщения об ошибке, нет? Выше в корне проекта у вас лежит ещё один файл .eslintrc, который как-то конфликтует с вашим.
    Ответ написан
    Комментировать
  • Можно ли реализовать кастомный typescript-декоратор для типизации пропсов по аналогии с @Input в Angular?

    Aetae
    @Aetae Куратор тега TypeScript
    Тлен
    Я, увы, не до конца понял, что именно вам нужно, но одно могу сказать: IDE умеет работать напрямую только с самим typescript, т.е. если исходя из логики typescript там должен быть тайпчек или там может быть ограниченный набор для подстановки - это будет работать. Если нет - нет. Кастомные трансформы не учитываются.
    Также IDE может расширенно поддерживать популярные расширения и трансформы с помощью (встроенных) плагинов, но для своего уникального кейса, выходящего за стандартные рамки, вам придётся пилить свой плагин.
    Декораторы же - это не магия, это обычные функции + сахарный синтаксис.
    Ответ написан
    Комментировать
  • Как перестать загрязнять код импортом интерфейсов?

    Aetae
    @Aetae Куратор тега TypeScript
    Тлен
    Можно просто положить где-то(во включённой в tsconfig.json) директории какой-нить global.d.ts и просто накидать туда часто используемых интерфейсов. )
    Но, конечно, если интерфейсы связанны с какими-то модулями, правильно и хранить их в соответствующих модулях. Всё равно же используя модуль, вы оный импортируете, добавка к импорту ещё и интерфейса погоды не делает.
    Ответ написан
    Комментировать
  • Сделать чтобы функция randomTime при нажатии 'n' button возвращала один результат как для setTimeout так и для отрисовки?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Мужик, ты что такое переменные знаешь?
    buttonClickHandler = id => {
        const delay = randomTime();
        setTimeout(() => {
          this.setState({
            array: [
              ...this.state.array,
              `${asd()} Button ${id} was pressed  with ${delay}s timeout`
            ]
          }); // распаковываю массив array из стейта и  добавляю "Нажата кнопка"
        }, delay * 1000);
      };
    Ответ написан
    1 комментарий
  • Как убрать eventListener из window?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Если не помогает e.stopPropagation - можно заюзать e.stopImmediatePropagation. :)
    И это даже сработает. По своему.

    Ещё можно вешать обработчики через кастомную обёртку над addEventListener, где вести учёт всех вешаемых обработчиков в привязке к элементу(или например к вручную задаваемой метке) и соответственно спокойно потом их удалять не зная функции.

    Только вот проблема у вас в архитектуре.
    Найдите причину, почему одинаковые обработчики навешиваются дважды и\или не учитывают переключения фокуса\контекста и исправьте её.
    Ответ написан
    Комментировать
  • React-typescript cannot find module "typescript"? Почему?

    Aetae
    @Aetae Куратор тега TypeScript
    Тлен
    Это грустные реалии typescript. При сборке вебпаком всё соберётся нормально, а вот для того чтобы IDE такое скушала - нужна персональна декларация(.d.ts) на каждый sass файл или общая но не информативная вида:
    declare module '*.scss' {
      const scss: any;
      export default scss
    }
    , чтоб он знал какие там где типы.

    Можно для автоматизации использовать такие штуки, но это всё такие костыли...
    Ответ написан
  • Подключение внешнего файла js к create-react-app?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Uncaught SyntaxError: Unexpected token '<', говорит что вместо скрипта тебе грузится html.
    Скорее всего путь к скрипту неправильный.
    Например путь прописан относительный и при этом проект лежит не в корне или используется history api: в таком случае в приложении пути разруливаются роутером, а жестко подключённый скрипт страдает.
    Ответ написан
    Комментировать
  • Как настроить абсолютный путь в typescript/webpack?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    В попробуй compilerOptions добавить что-то типа:
    "paths": {
      "src/*": [ "app/src/*" ]
    }
    Ответ написан
    Комментировать
  • Как сделать "снимок в pdf" страницы react-spa-приложения корректно?

    Aetae
    @Aetae
    Тлен
    Не глядя можно сказать, что ваше приложение работает в режиме окна 100% на 100%, а все скроллы что есть - они где-то там внутри.
    Полагаю height в setViewport нужно задать по-больше, чтобы всё влезло.)
    Ответ написан
  • Как записать значение в state?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Ответ на ваш вопрос: вы и так это делаете, всё в порядке.
    Ответ на вопрос "как прочитать значение из state после записи при didMount" дал Mikhail Osher.:)
    Ответ написан
    Комментировать