Ответы пользователя по тегу React
  • Как убрать предупреждение?

    IwanQ
    @IwanQ
    Плохие времена часто дают прекрасные возможности
    useEffect(() => {
      let stopGettingAfterUnmount = false;
    
      const getTodo = async () => {
        await axios
          .get("/api/todo", {
            headers: {
              "Content-Type": "application/json",
            },
            params: { userId },
          })
          .then((response) => {
            if (stopGettingAfterUnmount) return;
    
            setTodos(response.data);
          });
      };
    
      getTodo();
    
      return () => {
        stopGettingAfterUnmount = true;
      };
    }, [userId]);
    Ответ написан
    Комментировать
  • Почему данные меняются в двух стейтах одновременно?

    IwanQ
    @IwanQ
    Плохие времена часто дают прекрасные возможности
    const copyArray = (array = []) => JSON.parse(JSON.stringify(array));
    
    const [contacts, setContacts] = useState(copyArray(data));
    const [contactsInput, setContactsInput] = useState(copyArray(data));


    [...data] - это разворачивание массива. В данном случае оно бесполезно, потому что это массив не примитивов. Объекты копируются по ссылке, а не по значению.

    Если бы в массиве были значения в виде примитивов, это бы сработало.

    Я предложил самый простой способ, но вообще это не оптимально по производительности. Лучше делать это с помощью метода cloneDeep из библиотеки lodash.
    Ответ написан
    1 комментарий
  • Как использовать разные пути до изображений на разных медиа запросах в nextjs?

    IwanQ
    @IwanQ
    Плохие времена часто дают прекрасные возможности
    Нативного решения от next для вашего вопроса на данный момент нет. Самый банальный вариант делать это вручную:

    const getSpecificImage = (breakpoint) => {
      switch (breakpoint) {
        case 1200:
          return <Image src="https://google.com?v=1200" />;
    
        case 600:
          return <Image src="https://google.com?v=600" />;
    
         default:
          return <Image src="https://google.com?v=default" />;
      }
    };
    
    const breakpoint = window?.innerWidth;
    
    const imageElement = getImageSpecificImage(breakpoint);
    
    return (
      <>
        {imageElement}
      </>
    );
    Ответ написан
    Комментировать
  • Как организовать SSR в React.js для отдельных компонентов на странице?

    IwanQ
    @IwanQ
    Плохие времена часто дают прекрасные возможности
    По поводу отдельных SSR страниц не могу подсказать, но для создания SSR есть 2 основных фреймворка -
    Next и Gatsby. Первый более популярный. Next используют часто крупные игроки, например tiktok
    Ответ написан
    Комментировать
  • Как сохранять состояние открыта ли или закрыта боковая панель с помощью localstorage?

    IwanQ
    @IwanQ
    Плохие времена часто дают прекрасные возможности
    Не тестил, но должно воркать

    const TaskRegionView = () => {
        const isMenuOpenLocalStorageKey = '__isMenuOpen';
      
        const [condition, setCondition] = useState(() => {
          const value = localStorage.getItem(isMenuOpenLocalStorageKey);
    
         const isOpen = JSON.parse(value);
          
          if (isOpen === null) return false;
          
          return value;
        });
    
        const handleToggleCondition = () => {
            setCondition((prev) => {
              const state = !prev;
              
              localStorage.setItem(isMenuOpenLocalStorageKey, JSON.stringify(state));
              
              return state;
            });
        };
    ...
    Ответ написан
    Комментировать
  • Как верстают сайты на React и Next?

    IwanQ
    @IwanQ
    Плохие времена часто дают прекрасные возможности
    1.Верстка делается сразу в React компонентах? Или вначале делается классическая верстка, а потом переносится в React?
    Если проект разрабатывается с нуля, верстка сразу-же делается в компонентах. Если на React переносится уже готовый проект, классическую верстку делят на компоненты и просто переносят.

    2. Если сайт на React, там все должно быть на React или допускается сделать некоторые элементы на нативном Js?
    React использует концепцию virtual dom, поэтому нативные js элементы (const div = createElement('div')) не допускаются. Но есть похожий способ создания элементов без синтаксиса jsx (https://ru.reactjs.org/docs/react-without-jsx.html). Если React встраивается на уже готовый сайт частично, то часть сайта может быть спокойно на нативном JS, а другая на React.
    Ответ написан
    Комментировать
  • Как сделать такой импорт файлов?

    IwanQ
    @IwanQ
    Плохие времена часто дают прекрасные возможности
    1. Создаешь index.js в public/locales

    2. В index.js импортируешь нужные локали
    import en from 'path/to/en';
    import ru from 'path/to/ru';


    3. Экспроктируешь в виде объекта
    export {
        en,
        ru,
    }


    4. Готово
    Ответ написан
    3 комментария
  • Сервер прислал объект типа 'Buffer'. Как сделать из него ссылку на изображение?

    IwanQ
    @IwanQ
    Плохие времена часто дают прекрасные возможности
    Со стороны бека тебе нужно преобразовать buffer в base64, благо делается это очень просто
    Buffer.from('your img buffer').toString('base64')
    и дальше все должно работать корректно на стороне фронтента.

    P.S. Я думаю, что преобразовать buffer прямо со стороны фронтенда не возможно, потому что сам по себе buffer это прикол от nodejs, js в браузере про него ничего не знает.
    Ответ написан
    2 комментария