Skip to content
This repository has been archived by the owner on Feb 15, 2022. It is now read-only.

Can't perform a React state update on an unmounted component #253

Open
codthing opened this issue Dec 16, 2020 · 6 comments
Open

Can't perform a React state update on an unmounted component #253

codthing opened this issue Dec 16, 2020 · 6 comments

Comments

@codthing
Copy link

bug

11:48
Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
bug error

intent

I want to use the modal-box to play the video by clicking on the video-image list. So I wrote openVideoFunc to switch video-URL and show/hide modal-box.

code (In order to facilitate reading, part of the code has been simplified (style, etc.))

// Require local img
const image1 = require('./assets/img/1.jpg')
const image2 = require('./assets/img/2.jpg')
// Require local video
const video1 = require('./assets/video/1.mp4')
const video2 = require('./assets/video/2.mp4')
// array object for img/video
const videoRes = [{"videoId": 1,"videoUrl": video1,"posterUrl": image1,"title": "test1","describe": "test1......"},...]

export default function App() {

  const [visible, setVisible] = React.useState(false);
  const [videoUrl, setVideoUrl] = React.useState(null)

// Video Poster List

  const listItems = videoRes.map(item =>
    <TouchableOpacity onPress={() => openVideoFunc(item)} key={item.videoId}>
      <Layout>
        <Image source={item.posterUrl} />
      </Layout>
    </TouchableOpacity>
  )

//open video func

  const openVideoFunc = (item) => {

    setVideoUrl(item.videoUrl) //Switch video url
    setVisible(true) //open modal

  }

  return (

      <Layout>

        {listItems}

        <Modal visible={visible}>

            <Button onPress={() => setVisible(false)} /> //close modalbox           
            <VideoPlayer source: videoUrl /> //videoplayer

        </Modal>

      </Layout>

  );
}

version-Information

"expo-cli": 4.0.13
"expo": "^40.0.0",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "40.0.0",

@sunnylqm
Copy link
Collaborator

具体有啥问题啊?
这个警告一般没啥实际影响

@codthing
Copy link
Author

codthing commented Dec 17, 2020

@sunnylqm
内存泄漏,会导致应用程序崩溃。
image

@sunnylqm
Copy link
Collaborator

除非大量出现这个警告,否则不可能导致崩溃

@codthing
Copy link
Author

@sunnylqm
我在Genymotion中测试,expo服务,只写了这个模块,并没有其他模块。没有在真机上测试是否会崩溃。

@sunnylqm
Copy link
Collaborator

不会因为这个崩溃的

@codthing
Copy link
Author

@sunnylqm
Okay,我会继续关注这个问题。

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants