2017-09-08 43 views
0

我是新來的反應,收到此錯誤:RawText 「;}」 必須被包裹在一個明確的<Text>

RawText 「;}」 必須被包裹在一個明確的

當我嘗試映射我的JSON數組。每當我嘗試繪製某些東西時,都會發生這種情況。我讀過它與空間角色有關,但我無法找到任何東西。 關於如何調試的任何提示?乾杯!下面是代碼

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

是否符合你的需要的工作?如果是,請通過檢查答案附近的標記將其標記爲已批准。謝謝。 –

回答

2

我認爲你有一個額外的};渲染你的projects.map代碼結束後,其反應把它當作一個字符串。刪除它並嘗試,你的代碼應該工作正常。

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>

相關問題