0

我是 React 新手并收到此错误：

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>

4

1 回答 1

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>

于 2017-09-08T06:43:02.403 回答