json.stringify cannot serialize cyclic structures in react native

Question

In this code when you click on button a screenshot should be taken and screenshot should be shown by updating useState, but i get this error: json.stringify cannot serialize cyclic structures how can i solve this?

let [ImageURI, setImageURI,]=useState(<Image source={{uri:'http://website.com/wp-content/uploads/image.jpg'}}/>);

Here the function is that we use for taking screenshot and updating useState:


const captureScreenFunction=()=>{

    captureScreen({
        format: "jpg",
        quality: 0.8
      }).then(
        uri => setImageURI(ImageURI=uri),
        error => console.error("Oops, snapshot failed", error)
      );

}

And here what is returns:


    return (


 <Fragment>

<Button
title='capture screen'
onPress={captureScreenFunction}

>
</Button>

<Image
source={{uri:ImageURI}}
style={{width:300, height:200, resizeMode:'contain', marginTop:15}}
></Image>

</Fragment>


    )

Christian Fritz · Accepted Answer · 2020-01-18 20:04:26Z

1

Well of course it is cyclic, because you use Image in the definition of Image itself:

<Image
  source={{uri:ImageURI}}
  style={{width:300, height:200, resizeMode:'contain', marginTop:15}}
></Image>

ImageURI, here, I assume, refers to ImageURI constructed in the hook definition:

let [ImageURI, setImageURI,]=useState(<Image source={{uri:'http://website.com/wp-content/uploads/image.jpg'}}/>);

I think the fix is easy, and also better, because state variables should be as simple as possible:

let [ImageURI, setImageURI,] = useState('http://website.com/wp-content/uploads/image.jpg');

That's also consistent with the data type you are setting it to later in your code (a string).

answered Jan 18, 2020 at 20:04

Christian Fritz

21.5k3 gold badges48 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

json.stringify cannot serialize cyclic structures in react native

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related