Ответы пользователя по тегу React
  • Не вставил ли я себе палки в колеса, перейдя на reselect?

    @twolegs
    В вашей ситуации reselect избыточен - вам не нужно мемоизировать результаты селекторов. Это не палки в колеса конечно, но на текущий момент абсолютно лишнее.
    Ответ написан
    Комментировать
  • Зачем useRef нужен объект?

    @twolegs
    Это нужно для того, чтобы сохранять ссылку на сам ref-объект.
    То есть `useRef` всегда возвращает ссылку на один и тот же объект.
    Таким образом становится возможно использовать его без лишних апдейтов в том же useEffect.
    Ответ написан
    3 комментария
  • Оцените логику проекта?

    @twolegs
    В render такое делать нельзя. Место для такой подписки - componentDidMount. Думаю, правильнее будет подписаться один раз, и не делать ничего, если isMenuOpen в true.
    if (isMenuOpen) {
          document.addEventListener('keydown', this.keyPressHandler)
        } else {
          document.removeEventListener('keydown', this.keyPressHandler)
        }


    Остальное (организация компонент) - это скорее вкусовщина. Но если смотреть в целом - нет какой-то консистентности. Где-то есть компоненты для логических элементов, где-то нет.
    Ответ написан
    2 комментария
  • Почему react-scripts build не добавляет service-worker.js в билд?

    @twolegs
    https://create-react-app.dev/docs/making-a-progres...

    Нужно добавить файл src/service-worker.js

    Либо воспользоваться темплейтом cra-template-pwa
    Ответ написан
    Комментировать
  • Как сделать чтобы useEffect выполнялся до монтирования компонента?

    @twolegs
    Никак, useEffect всегда вызывается после монтирования компонента.
    Выделите контент в отдельную компоненту и рендерите по условию. Только так.
    Ответ написан
    Комментировать
  • Как пофиксить NODE_ICU_DATA?

    @twolegs
    Похоже, что вы на windows пытаетесь запустить скрипт, который к этому не приспособлен.
    NODE_ICU_DATA - это переменная окружения, попробуйте устанавливать ее через cross-env (https://www.npmjs.com/package/cross-env). Но не уверен. что pwd будет работать даже в этом случае.
    Ответ написан
    Комментировать
  • Компонент Query vs хук useQuery, что лучше использовать?

    @twolegs
    Что вам больше нравится, принципиальной разницы нет. useQuery более новый способ, Query уже ближе к легаси из предыдущих версий.
    С моей точки зрения useQuery удобнее, т.к. в сумме кода получается меньше (нет лишних компонент и монструозных render props).
    Ответ написан
    Комментировать
  • Как правильно загружать динамические изображения в дочерний компонент?

    @twolegs
    Данный подход справедлив только к статическим сайтам - где известно точное количество изображений и все они вручную прописаны в файле-библиотеки

    Все верно, при использовании изображений как модулей (а при импорте и сборке через вебпак это именно так, изображения по факту становятся js-модулями).
    ) В реальных проектах - где количество изображений неизвестно и записывать путь к каждой картинке - не лучшее решение. Для этого в state из componentDidMount - ajax запроса будет передан путь к картинке которая храниться на сервере.

    При использовании динамических изображений пути и сами изображения становятся не статикой, а данными. То есть и работать с ними надо как с данными. В общем случае эти пути надо получать с бэкенда вместе с запросом данных.

    В итоге да, верно. import - это когда это статические файлы. В случае динамики пути к изображениям переходят в модель данных.
    Ответ написан
  • Почему после mapStateToProps значение в props - undefined?

    @twolegs
    Потому что someText не в корне объекта. Надо доставать state.settingsReducer.someText
    Ответ написан
  • Почему не подключается img через require?

    @twolegs
    Подобное решение не очень удачно, так как вебпак не знает какие ресурсы необходимо скопировать (вы их импортируете динамически).
    Возможное решение:
    Импортировать все необходимые изображения. Далее вы можете создать словарь, и в коде использовать значения из словаря.
    import Img1 from './img1.png';
    import Img2 from './img1.png';
    import Img3 from './img1.png';
    
    export const images = { Img1, Img2: Img3 }


    И при использовании:
    import { images } from 'assets.js';
    
    <ImgComponent src={images.Img1} />


    Лоадер вебпака преобразует файлы изображений в относительные пути, так не нужно бояться статических импортов этих файлов. Фактически ресурс загрузится только когда этот путь попадет в src.
    Ответ написан
  • Почему defaultValue не меняется визуально?

    @twolegs
    Думаю, вам нужно ознакомиться вот с этой статьей:
    https://ru.reactjs.org/docs/uncontrolled-component...
    У вас два варианта взаимодействия с инпутом - контролируемый и неконтролируемый. Судя по всему сейчас вы ближе ко второму.
    Ответ написан
    Комментировать
  • При первичном рендеринге, роутер возвращает undefined, что делать?

    @twolegs
    Вы получаете значение асинхронно.
    1. Для обновления компонента после получения данных нужно использовать стейт.
    2. Для сайд-эффектов нужно использовать useEffect.

    export default function Home() {
    
        const router = useRouter()
        const id = router.query.id;
    
        const [company, setCompany] = useState(null);
    
        useEffect(() => {
            fetch(`${url}/selectCompany`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    id: id
                })
            })
            .then(response => response.json())
            .then(result => setCompany(result));
        }, [id, setCompany])
    
        return company ? (
            <div className="container">
    
                <Head>
                    <title>Company</title>
                    <link rel="icon" href="/favicon.ico" />
                </Head>
    
                <TopBar />
                <GetCompanyPage company={company} />
                <Footer />
    
            </div>
        ) : null;
    }
    Ответ написан
  • Как отправить в state новое значения quantity?

    @twolegs
    1. Вы изменяете объект из payload, а не из стейта. Нужно поменять existItem, чтобы что-то изменилось.
    2. Редакс предполагает иммутабельность. Так что корректное обновление стейта в данном случае будет выглядеть так:
    const item = action.payload
          const existItem =  state.asideItems.find(item => action.payload.id === item.id);
          if(existItem)
          {
            return{
              ...state,
              asideItems: state.asideItems.map(currentItem => item.id === currentItem.id ? { ...currentItem, quantity: currentItem.quantity + 1 } : currentItem),
              total: state.total + item.price,
            }
          }
    Ответ написан
  • Есть какая библиотека для сортировки элементов в списке с анимацией?

    @twolegs
    Виртуализированные списки довольно сложно анимировать, т.к. у вас нет полного контроля над списком (элементы вне окна не монтируются).
    У вас три варианта:
    1. Не использовать `react-virtualized`. Тогда анимация решается тривиально, для этого есть куча библиотек. Но этот способ работает только в случае с небольшими списками.
    2. Попробовать использовать что-то типа `framer-motion`. Но в этом случае нет никаких гарантий, что анимация будет работать без артефактов, т.к. `react-virtualized` довольно жестко контролирует состояние вашего списка.
    3. Не использовать анимаций вообще. Если список настолько большой, что необходимо использовать виртуализацию, то будет довольно сложно сделать анимацию передвижения, которая будет выглядеть хорошо (например, список в 1000 элементов, и последний элемент нужно переместить наверх).
    Ответ написан
    1 комментарий
  • Как сайту на React передать строку с компонентом с сервера?

    @twolegs
    Почитайте про Server Side Rendering.
    https://reactjs.org/docs/react-dom.html#hydrate - эта функция вам поможет. Но есть особенность - hydrate не работает на уровне компонента, только на уровне приложения. Поэтому отдельные компоненты нужно будет рендерить в порталах (https://reactjs.org/docs/portals.html)
    Ответ написан
    Комментировать
  • Почему очищается поле ввода текста?

    @twolegs
    const onDrop = useCallback(async (acceptedFiles) => {
        const newImage = acceptedFiles[0];
        let hasError;
    
        if (newImage.size > allowedMaximumFileSize) {
          hasError = true;
    
          alert("Размер файла не допустим");
        }
    
        if (!allowedMimeTypes.includes(newImage.type)) {
          hasError = true;
    
          alert("Тип файла не допустим");
        }
    
        if (!hasError) {
          const previewBASE64 = await fileReader(newImage);
    
          onImageChange(name, { file: newImage, preview: previewBASE64 });
        }
      }, []);


    Вот тут у вас в массиве зависимостей нет onImageChange. Соответственно, всегда выполняется onImageChange с изначальным значением (то есть пустыми полями).

    P.S. Если добавить в зависимости onImageChange, то мемоизация будет бесполезна, потому выше вы создаете эту функцию каждый рендер.
    Ответ написан
    3 комментария
  • Как добавить класс к корню компонента?

    @twolegs
    Необходимо прокидывать названия класса пропсом и уже в самом компоненте делать так, что бы этот пропс добавлялся в класс?

    Именно так.
    Ответ написан
    Комментировать
  • Как собрать react приложение для ios?

    @twolegs
    Можно попробовать с Cordova, либо распространять приложение как PWA.
    Ответ написан
    Комментировать
  • Как обернуть компонент в HOC при помощи compose?

    @twolegs
    HOC должен возвращать компонент, а не элемент для рендера.
    В вашем случае будет как-то так:
    const withTheme = Component => ({ userPalette, ...props }) => (
      <ThemeProvider theme={defaultMaterialTheme(userPalette)}>
        <Component {...props} />
      </ThemeProvider>
    );
    
    export default compose(
      hot,
      connect(mapStateToProps),
      withTheme,
    )(Routes);
    Ответ написан
    Комментировать
  • Применимо ли к React структура приложений из JS?

    @twolegs
    React - это только View-слой приложения, поэтому остальную логику вы можете организовать так, как вам хочется. То, что react+redux - это самый популярный стек, не означает, что это единственно правильная архитектура.
    Вполне можно реализовать классическое MVC-приложение с использованием React на фронтенде. Но тут, опять же, следует исходить из самого приложения. Если оно достаточно простое, лишние абстракции могут быть ни к чему.
    Ответ написан
    Комментировать