点击“获取趋势”按钮,从后端服务器通过WebSockets检索并显示趋势列表。它按预期工作。下面是相应的源代码:
import React, { Component } from 'react';
import './App.css';
class TrendRow extends Component {
render() {
return (
<tr>
<td>{this.props.onerow}</td>
</tr>
);
}
}
class TrendTable extends Component {
render() {
var rows = [];
for (var i=1; i<3; i++) {
rows.push(<TrendRow key={i} onerow={this.props.trends[i]}/>);
}
return (
<table>
<thead>
<tr>
<th>List of Trends</th>
</tr>
</thead>
<tbody>{rows}</tbody>
</table>
);
}
}
class App extends Component {
constructor() {
super();
this.state = {
ws: new WebSocket('ws://localhost:8025/websockets/TwitterWSService'),
getTrendsqueryString: 'GETTRENDS',
listoftrends: ['{"trend":"#Default","id":"0"}']
};
this.handleOnClick = this.handleOnClick.bind(this);
}
handleOnClick = (event) => {
this.state.ws.send(this.state.getTrendsqueryString);
this.state.ws.onmessage = (event) => {
this.setState(prevState => ({listoftrends: prevState.listoftrends.concat(event.data)}));
}
}
render() {
return (
<div>
<button onClick={this.handleOnClick}>Get Trends</button>
<TrendTable trends={this.state.listoftrends} />
</div>
);
}
}
export default App;
现在,当我尝试使用“JSON.parse”将显示的JSON字符串转换为JSON对象时,根据我的解析位置,会出现不同类型的错误。
如果我按照下面所示进行解析:
class TrendRow extends Component {
render() {
var jsonobject = JSON.parse(this.props.onerow);
return (
<tr>
<td>{jsonobject}</td>
</tr>
);
}
}
我遇到了以下错误:
"SyntaxError: Unexpected token u in JSON at position 0
var jsonobject = JSON.parse(this.props.onerow);"
对该错误信息进行快速谷歌搜索后,发现以下讨论,但是不太清楚如何将其解决应用于我的用例: uncaught syntaxerror unexpected token U JSON 我理解这个错误是由于初始渲染期间'this.props.onerow'的值未定义而JSON.parse()尝试解析此对象引起的。即使使用默认字符串初始化“listoftrends”对象也无法解决错误。
另一方面,如果像下面所示使用JSON.parse(),
handleOnClick = (event) => {
this.state.ws.send(this.state.getTrendsqueryString);
this.state.ws.onmessage = (event) => {
var jsonobject = JSON.parse(event.data);
this.setState(prevState => ({listoftrends: prevState.listoftrends.concat(jsonobject)}));
}
}
我收到了错误消息:
谷歌搜索让我陷入了另一个兔子洞!请问有人能提供其他解决方案让我尝试吗?对象不是React的有效子级...