设置状态而不使用 useEffect 重新渲染不起作用

Question

我只需要我的状态值根据屏幕调整实时时间进行更改。即使我的屏幕尺寸发生变化，我的计数值也保持不变，除非我重新加载页面。这需要实时更新以获得更好的响应式设计。这是我的代码。谢谢！

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>
    );
}

Answer 1

那是因为你的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>
    );
  }

Answer 2

useEffect 表示：在呈现此组件后运行传递给 useEffect 的回调函数，并且由于您传递了一个空数组作为第二个参数，这意味着 useEffect 是执行一次，仅在该组件第一次呈现时执行（而不是在状态更改时执行），因为您的函数调用在 useEffect 内部，它仅在您重新加载页面时起作用，您可以将变量添加到空数组中Mohamed Magdy 做了，或者只是在 useEffect

之外再次调用 loadMediaQuery

Answer 3

扩展 this answer 中提供的自定义挂钩，您可以执行类似

的操作

const [width, height] = useWindowSize();

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

那个useEffect函数说：每次width的值改变时执行loadMediaQuery()。

设置状态而不使用 useEffect 重新渲染不起作用

Setting state without re-rendering with useEffect not working

state

setstate

reactjs

react-hooks

use-effect