设置状态而不重新渲染，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

在这个答案中提供的自定义钩子上进行扩展，您可以执行类似的操作

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

useEffect函数表示：每当width的值发生变化时，执行loadMediaQuery()。