Задать вопрос
Ответы пользователя по тегу React
  • Бесконечный цикл useEffect?

    black1277
    @black1277
    Вольный стрелок
    Всё от того, что вы не желаете знать про жизненный цикл компонентов. Разберем по порядку, что происходит.
    1 компонент смонтировался
    2 срабатывает useEffect - он всегда срабатывает после того как готово DOM дерево.
    3 в useEffect срабатывает useState
    4 изменение состояния обязывает реакт сделать ререндер
    5 тут ключевой момент, компонент уже был смонтирован, поэтому происходит только его обновление - и вот тут useEffect ведет себя по разному. Если у него нет массива зависимостей - то он опять сработает и всё будет повторятся с 3-го пункта. Если же у него есть массив зависимостей - то он сработает только если после рендера обновления изменилось значение в этом массиве.
    Значит вам нужно как минимум указать newSendedMessage в этом массиве. НО! У вас есть и другая функция, которая изменяет стейт - sortMessages. Её тоже нужно указать в массиве зависимостей, если не хотите пропускать обновление при изменении receivedMsg. Но если просто поместить эту ф-ю в массив зависимостей - то опять получите бесконечный перерендер - потому что ф-я каждый раз будет разная (она пересоздается каждый раз во время обновления). Есть разные варианты как это исправить - или завернуть sortMessages в useCallback (у которого должен быть массив зависимостей с receivedMsg) или перенести саму ф-ю sortMessages внутрь useEffect и вызывать там. Тут вам решать какой вариант подходит логике вашего компонента больше.
    Ответ написан
    1 комментарий
  • Как хайпово писать медиа запросы в react?

    black1277
    @black1277
    Вольный стрелок
    Есть 3 способа подключить медиазапросы:
    1 Прямо в HTML-документе
    <link rel="stylesheet" media="(max-width: 700px)" href="example.css" />

    2 Использовать правило import в CSS-файле
    @import url(example.css) (max-width: 700px);

    3 Директиву media в CSS-файле
    @media (max-width: 700px) {
      /* Здесь прописывается CSS-правила */
    }

    Реакт позволяет использовать все эти способы. Поэтому, выбор остается за разработчиком. Если следовать идее разбивки кода на компоненты, то логичнее всего вставлять медиазапросы в стилях того компонента, который требует различного отображения.
    Ответ написан
    Комментировать
  • При попытке получения данных через Axios получаю странную ошибку?

    black1277
    @black1277
    Вольный стрелок
    Вы пытаетесь получить данные с хоста localhost:5000 находясь на хосте localhost:3000. Даже не смотря на то, что различается всего лишь порт - политика безопасности браузера предотвращает такое поведение. Погуглите, что такое CORS и возможно, вам поможет использование библиотеки cors на стороне сервера. Примеры использования там есть.
    Ответ написан
    Комментировать
  • Можно ли так обнулить state в reducer?

    black1277
    @black1277
    Вольный стрелок
    Строго говоря - некорректно. Из определения редюсера - это должна быть чистая функция. Чистая функция должна брать данные только из своих аргументов и не иметь сайд-эффектов.
    Если вы используете объект определенный вне ф-и (initialState -пусть даже он и лежит рядом) - она перестает быть чистой. Хотя работать будет, но возможно всякие линты могут ругаться, выдавать warning-и при компиляции.
    Ответ написан
    Комментировать
  • Почему state не доступен в interval?

    black1277
    @black1277
    Вольный стрелок
    Добавьте лог сразу после установки нового состояния:
    setEndTime(endTimeUnix * 1000);
    console.log('endTime', endTime);
    const timerInterval = setInterval(timer, 1000);

    Вы увидите, endTime undefined. Потому что установка нового стейта не гарантирует, что это произойдет сразу, но гарантирует новое значение при следующем рендере.
    Если всё же хочется что-то делать сразу после установки нового стейта - то можно переписать компонент в классовом стиле - там у this.setState вторым параметром передается callback-функция, которая выполняется после установки нового значения стейта.
    Ответ написан
    Комментировать
  • Почему Next JS не проксирует запросы к api?

    black1277
    @black1277
    Вольный стрелок
    Добавьте в файл package.json строку
    "proxy": "http://localhost:82",
    Ответ написан
    Комментировать
  • Оцените пожалуйста мой первый проект "Crud To-do list" на React.js + Node.js + Postgresql?

    black1277
    @black1277
    Вольный стрелок
    По вопросам:
    1 Особой разницы нет, только для вашей IDE - она правильнее подсказки будет делать в файле jsx
    2 Первое предупреждение о том, что используете key={todo.id} немного не там - нужно в родительский div это переместить
    <div className="todos" вот сюда>
           <div key={todo.id} className="item-todo" >

    второе предупреждение связано с тем, что хук в своем массиве зависимостей не видит вызываемую в нем функцию
    useEffect(() => {
            getTodos()
        }, [вот тут])

    пока можете поставить такую строку, чтобы не видеть ошибку
    useEffect(() => {
            getTodos()
    // eslint-disable-next-line
        }, [])

    Если хотите разобраться с правильным использованием useEffect
    Ответ написан
    1 комментарий
  • Как правильно передать props?

    black1277
    @black1277
    Вольный стрелок
    Props это объект - у него нет функции map. Вытащи из пропса нужный массив и к нему примени map.
    Ответ написан
    5 комментариев
  • Почему локально подключенный React не работает?

    black1277
    @black1277
    Вольный стрелок
    Потому что политика безопасности браузеров запрещает одновременное использование локальных и сетевых файлов.
    Ответ написан
  • Как добавить объект в массив в json-server, axios?

    black1277
    @black1277
    Вольный стрелок
    axios({
      method: 'post',
      url: '/usersData',
      data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
      }
    });

    в поле data передавайте что хотите
    Ответ написан
  • Как выполнить redux dispatch внутри useEffect?

    black1277
    @black1277
    Вольный стрелок
    неправильно используете асинхронку с хуком useEffect. Нужно определить асинхронную функцию в теле хука и потом вызвать её. Вот тут подробнее https://www.robinwieruch.de/react-hooks-fetch-data
    Ответ написан
    Комментировать
  • Как вывести данные из JSON?

    black1277
    @black1277
    Вольный стрелок
    useEffect в котором
    setProduct(responseId.data)
    console.log(responseId.data)

    выполняется один раз, и при смене id ничего не происходит(потому что в зависимостях стоит [] - пустой массив). Попробуйте вторым аргументом в useEffect поставить id - тогда все должно получится. Нужно в виде масcива [id]
    Ответ написан
    2 комментария