Установка состояния без повторного рендеринга с использованием useEffect не работает - PullRequest
Новая
       101

Установка состояния без повторного рендеринга с использованием useEffect не работает

0 голосов
/ 09 марта 2020

Мне просто нужно изменить значение своего состояния в зависимости от времени изменения размера экрана. Несмотря на то, что размер моего экрана изменяется, значение моего счета остается прежним, пока я не перезагрузлю страницу. это нужно обновить вживую для лучшего адаптивного дизайна. Вот мой код Спасибо! 

import React, { useState, useEffect } from 'react';
import Carousel from '@brainhubeu/react-carousel';
import '@brainhubeu/react-carousel/lib/style.css';
import { useMediaQuery } from 'react-responsive'

const MyCarousel = () => {

    useEffect(() => {
        loadMediaQuery();
    }, []);

    const [count, setCount] = useState(0);

    const loadMediaQuery = () =>{
        if (tablet)
            setCount(1)
        if (phone)
            setCount(2)
        if (desktop)
            setCount(3)
    }

    const tablet = useMediaQuery({
        query: '(max-width:  876px)'
    })
    const phone = useMediaQuery({
        query: '(max-width:  576px)'
    })
    const desktop = useMediaQuery({
        query: '(min-width:  876px)'
    })

    return (
        <div>
            <Carousel slidesPerPage={count} >
            <img className="image-one"/>
            <img className="image-two"/>
            <img className="image-three"/>
            </Carousel>
      </div>
    );
}

Ответы [ 3 ]

1 голос
/ 09 марта 2020

useEffect означает: запускает функцию обратного вызова, переданную в useEffect после рендеринга этого компонента, и поскольку вы передали пустой массив в качестве второго аргумента, это означает, что useEffect выполняется один раз, только в первый раз, когда этот компонент визуализируется (а не при изменении состояния), поскольку вызов вашей функции находится внутри useEffect, он будет работать только при перезагрузке страницы, вы можете добавить переменные в пустой массив, например Mohamed Magdy сделал или просто позвонил loadMediaQuery снова за пределы useEffect

0 голосов
/ 09 марта 2020

Расширяя пользовательский хук, предоставленный в этом ответе , вы можете сделать что-то вроде 

const [width, height] = useWindowSize();

useEffect(() => {
  loadMediaQuery();
}, [width]);

, что useEffect функция говорит: выполнять loadMediaQuery() каждый раз, когда значение width изменений.

0 голосов
/ 09 марта 2020

Это потому, что ваш useEffect не имеет зависимостей, поэтому он загружается один раз только после монтирования компонента. Чтобы исправить это, вы должны иметь следующий код: 

import React, { useState, useEffect } from 'react';
import Carousel from '@brainhubeu/react-carousel';
import '@brainhubeu/react-carousel/lib/style.css';
import { useMediaQuery } from 'react-responsive';

const MyCarousel = () => {

  const tablet = useMediaQuery({
    query: '(max-width:  876px)'
  });

  const phone = useMediaQuery({
    query: '(max-width:  576px)'
  });

  const desktop = useMediaQuery({
    query: '(min-width:  876px)'
  });

  useEffect(() => {
    loadMediaQuery();
  }, [tablet, phone, desktop]);

  const [count, setCount] = useState(0);

  const loadMediaQuery = () =>{
    if (tablet)
      setCount(1)
    else if (phone)
      setCount(2)
    else if (desktop)
      setCount(3)
    }

    return (
      <div>
        <Carousel slidesPerPage={count} >
          <img className="image-one"/>
          <img className="image-two"/>
          <img className="image-three"/>
         </Carousel>
       </div>
    );
  }
...