Skip to content
This repository was archived by the owner on Feb 15, 2022. It is now read-only.
This repository was 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

@codthing

Description

@codthing

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",

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions