2017-09-08 3 views
0

Je suis nouveau à réagir et à obtenir cette erreur:rawText ";}" doit être enveloppé d'une façon explicite <Text>

rawText ";}" doit être enveloppé dans une explicite

Lorsque J'essaye de mapper mon tableau JSON. Cela arrive chaque fois que j'essaie de cartographier quelque chose. J'ai lu que cela a quelque chose à voir avec les caractères de l'espace mais je ne peux pas en trouver. Des conseils sur comment je peux déboguer cela? À votre santé! Voici le 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

Est-ce que le travail de réponse pour vous? Si oui, veuillez le marquer comme approuvé en cochant la case près de la réponse. Merci. –

Répondre

2

Je pense que vous avez un }; supplémentaire dans votre code rendu à la fin projects.map se termine, qui réagissent le traite comme une chaîne. Retirez-le et essayez, votre code devrait fonctionner correctement.

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>