2017-09-08 44 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>

相关问题