原始文本"; }"必须用显式<Text>包装

Question

我是新手反应和获取此错误的新手：

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>

Answer 1

我认为您的渲染中有一个额外的 };，在 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>