我是React的新手并收到此错误:
RawText&#34 ;; }"必须用明确的
包装
当我尝试映射我的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);
&#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;
答案 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>