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的意思是：在呈现此组件之后，运行传递给useEffect的回调函数，并且由于您传递了一个空数组作为第二个参数，因此意味着useEffect被执行一次，仅在第一次呈现此组件时（而不是在状态更改时），由于您的函数调用位于useEffect内部，因此仅当您重新加载页面时它才起作用，您可以将变量添加到{{ 3}}，还是在loadMediaQuery之外再次致电useEffect

Answer 2

那是因为您的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 3

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

const [width, height] = useWindowSize();

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

该useEffect函数表示：每当loadMediaQuery()的值更改时，执行width。

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

3 个答案: