Skip to content

Bug: Can't perform a React state update on an unmounted component #20472

@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

    Status: UnconfirmedA potential issue that we haven't yet confirmed as a bug

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions