RawText&#34 ;; }&#34;必须用明确的<text>

时间:2017-09-08 06:38:18

标签: javascript reactjs react-360

我是React的新手并收到此错误:

  

RawText&#34 ;; }&#34;必须用明确的

包装

当我尝试映射我的JSON数组时。每次我尝试映射某些东西时都会发生这种情况。我已经读到它与空间角色有关但我找不到任何东西。 有关如何调试此问题的任何提示?干杯!这是代码

&#13;
&#13;
    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);
&#13;
<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>
&#13;
&#13;
&#13;

1 个答案:

答案 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>