Question

我遇到以下错误：

无法在已卸载的组件上执行React状态更新。这是无操作，但表示您的应用程序内存泄漏。修理，取消useEffect清理中的所有订阅和异步任务功能。

这是由以下基于挂钩的组件引起的

import { animated, config, useTransition } from 'react-spring'
import styled from 'styled-components'
import React, { useState, useEffect } from 'react'

const ProductImage = styled(animated.div)`
  background: ${({ colour }) => colour} url(${({ image }) => image}) no-repeat center;
  background-size: cover;
  transition: background-image 0.2s ease-in-out;
  width: 100%;
  height: 100%;
`

interface Props {
  images: string[]
  colour?: string
}

const Gallery = ({ images, colour }: Props) => {
  const [index, set] = useState(0)
  const transitions = useTransition(images[index], image => image, {
    from: { opacity: 0 },
    enter: { opacity: 1 },
    leave: { opacity: 0 },
    config: config.molasses
  })
  useEffect(() => void setInterval(() => set(state => (state + 1) % images.length), 5000), [])
  return (
    <>
      {transitions.map(({ item, props, key }) => (
        <ProductImage key={key} image={item} style={props} colour={colour} />
      ))}
    </>
  )
}

export default Gallery

我认为set()方法在离开页面后被调用。通常，我将在componentDidUnmount()方法中处理此问题，在该方法中可以设置一些标志来停止调用。我不确定使用钩子时该怎么办。有人知道如何解决这个问题吗？

Answer 1

问题是这种影响：

useEffect(() => void setInterval(() => set(state => (state + 1) % images.length), 5000), [])

这将开始一个永无休止的间隔。您需要通过返回清除函数来告诉useEffect如何清除效果：

useEffect(() => {
  const id = setInterval(() => set(state => (state + 1) % images.length, 5000)

  // return cleanup method
  return () => clearInterval(id);
}, []);

反应如何解决内存泄漏

1 个答案: