0

I am using react-vr and trying to use the json object to render image, but I'm getting an error that the browser cannot read property 'rotationOffset' of undefined. Below is my code for reference. 

     static defaultProps = {
            portal: 'webTour.json',
          } //assigning the json to a variable.

        componentDidMount() {
        fetch(asset(this.props.portal).uri)
        .then(response => response.json())
        .then(responseData => {
          this.init(responseData);
        })
        .done
        ();
      }

    init(tourConfig) {
        // Initialize the tour based on data file.
        this.setState({
          data: tourConfig,
          locationId: null,
          nextLocationId: tourConfig.firstPhotoId,
          rotation: tourConfig.firstPhotoRotation + (tourConfig.photos[tourConfig.firstPhotoId].rotationOffset || 0),
        });
      }

render() {
//some code

const locationId = this.state.locationId;
    const photoData = (locationId && this.state.date.photos[locationId]) || null;
    const rotation = this.state.data.firstPhotoRotation + ((photoData && photoData.rotationOffset) || 0);
    const isLoading = this.state.nextLocationId !== this.state.locationId;

return (
<Pano source = {asset(this.state.data.photos[this.state.nextLocationID].uri)} />

}

And below is my json file for reference. 

{
  "nave_icon": "gateway.png",
  "firstPhotoID" : "112001",
  "firstPhotoRotation" : 90,
  "photos":{
    "112001":{
      "rotationOffset": 0,
      "uri": "CustomPano_2.jpg",
}
}
}

What I'm trying to do is that change the background image with the objects inside the Pano. Am I missing any essential syntax? I've spent hours to figure out the problem is not working. Any help is much appreciated.

karma gyatso
  • 11
  • 3
  • Possible duplicate of [Detecting an undefined object property](https://stackoverflow.com/questions/27509/detecting-an-undefined-object-property) – mustaccio Oct 15 '18 at 17:48
  • I tested the below example and it is running fine. I was wondering what I did wrong. I check the url and didn't found my answer. https://github.com/facebook/react-360/tree/master/Examples/TourSample – karma gyatso Oct 15 '18 at 18:03

0 Answers0