2017-09-08 1 views
0

gewickelt werden Ich bin neu zu reagieren und diesen Fehler:rawText ";}" muss in einem expliziten <Text>

rawText ";}" muss in einem expliziten

gewickelt werden, wenn Ich versuche, mein JSON-Array zuzuordnen. Dies geschieht jedes Mal, wenn ich versuche, etwas abzubilden. Ich habe gelesen, dass es etwas mit Raumzeichen zu tun hat, aber ich finde keine. Irgendwelche Tipps, wie ich das debuggen kann? Prost! Hier ist der Code

import React from 'react'; 
 
    import { AppRegistry, asset, Pano, Text, Image, View, StyleSheet,} from 'react-vr'; 
 
    
 
    export default class Kuji extends React.Component { 
 
     static defaultProps = { 
 
     prjSource: 'projects.json', 
 
     }; 
 
    
 
    constructor(props) 
 
    { 
 
     super(props); 
 
    
 
     this.state = { 
 
     data: null, 
 
     projectId: null, 
 
     rotation: null, 
 
     }; 
 
    } 
 
    
 
    componentDidMount() 
 
    { 
 
     fetch(asset(this.props.prjSource).uri) 
 
     .then(response => response.json()) 
 
     .then(responseData => { 
 
     this.init(responseData); 
 
     }) 
 
     .done(); 
 
    } 
 
    
 
    init(projectConfig) { 
 
     // Initialize the tour based on data file. 
 
     this.setState({ 
 
     data: projectConfig, 
 
     }); 
 
    } 
 
    
 
    
 
    render() { 
 
     if(!this.state.data) 
 
     { 
 
     return null; 
 
     } 
 
    
 
    const projectId = (this.state.projectId); 
 
    const projectData = (this.state.data.projects); 
 
    
 
     return (
 
     <View> 
 
      <Pano source={asset('dolphin.jpg')}/> 
 
      <View> 
 
      {projectData.map((project, index) => { 
 
       return (
 
       console.log(project.title) 
 
       ); 
 
       })}; 
 
      } 
 
      </View> 
 
     </View> 
 
    ) 
 
    }; 
 
    } 
 
    
 
    AppRegistry.registerComponent('Kuji',() => Kuji);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

+0

Ist die Antwort für Sie arbeiten? Wenn ja, bitte markieren Sie es als genehmigt, indem Sie das Häkchen neben der Antwort markieren. Vielen Dank. –

Antwort

2

Ich glaube, Sie haben ein zusätzliches }; in Ihrem machen nach dem projects.map Code endet, die behandelt es als String reagieren. Entfernen Sie es und versuchen Sie, Ihr Code sollte gut funktionieren.

import React from 'react'; 
 
import { AppRegistry, asset, Pano, Text, Image, View, StyleSheet,} from 'react-vr'; 
 

 
export default class Kuji extends React.Component { 
 
    static defaultProps = { 
 
    prjSource: 'projects.json', 
 
    }; 
 

 
constructor(props) 
 
{ 
 
    super(props); 
 

 
    this.state = { 
 
    data: null, 
 
    projectId: null, 
 
    rotation: null, 
 
    }; 
 
} 
 

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

 
init(projectConfig) { 
 
    // Initialize the tour based on data file. 
 
    this.setState({ 
 
    data: projectConfig, 
 
    }); 
 
} 
 

 

 
render() { 
 
    if(!this.state.data) 
 
    { 
 
    return null; 
 
    } 
 

 
const projectId = (this.state.projectId); 
 
const projectData = (this.state.data.projects); 
 

 
    return (
 
    <View> 
 
     <Pano source={asset('dolphin.jpg')}/> 
 
     <View> 
 
     {projectData.map((project, index) => { 
 
      return (
 
      console.log(project.title) 
 
      ); 
 
      }) 
 
     } 
 
     </View> 
 
    </View> 
 
) 
 
}; 
 
} 
 

 
AppRegistry.registerComponent('Kuji',() => Kuji);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Verwandte Themen