Question

所以我目前正在使用React Hooks，并且正在尝试使用useEffect。假设每当依赖项更改时，useEffect都会重新渲染对吗？但这对我不起作用。这是我的代码：

const [slidesPerView, setSlidesPerView] = React.useState(0)

  React.useEffect(() => {
    setSlidesPerView(() => (window.innerWidth <= 375 ? 1 : 2))
    console.log("rerender?", slidesPerView)
  }, [window.innerWidth])

每次更改屏幕尺寸时，useEffect不会重新渲染。我想知道我做错了什么吗？

Answer 1

useEffect将响应props更改或state更改。

每次更改屏幕尺寸组件都不知道是否更改window.innerWidth，因为它不在state或props中。

要使其正常工作，您需要将window.innerWidth存储到状态中，并将事件侦听器附加到window上，只要window的大小发生变化，它将获得window.innerWidth和将其存储到state中，随着state的更改，您的useEffect将重新运行，最后您的组件将重新呈现。

const [size, setSize] = React.useState(window.innerWidth)


React.useEffect(() => {
    //Attach event on window which will track window size changes and store the width in state
    window.addEventListener("resize", updateWidth);

    setSlidesPerView(() => (size <= 375 ? 1 : 2));
    console.log("rerender?", slidesPerView);

    //It is important to remove EventListener attached on window.   
    () => window.removeEventListener("resize", updateWidth);
}, [size])

const updateWidth = () => {
    setSize(window.innerWidth)
}

Demo

依赖关系更改后，ReactJS useEffect无法呈现

1 个答案: