我正在开发一个应用程序,我正在提出请求并尝试将数据发送回来通过提取做出反应。
到目前为止,这是我的路由器文件:
router.get('/', (req, res, next) => {
console.log('I got here before request..... >>>>>>>>>');
request(`https://rest.coinapi.io//v1/exchangerate/BTC?apikey=${API}`, (error, response, body) => {
console.log('I got here..... >>>>>>>>>');
if(error){
console.log('error >>>>>>', error);
}
console.log(response.body);
});
});
我把它包括在主服务器中,js
// include routes
var routes = require('./routes/index');
app.use('/', routes);
app.listen(3000, () => {
console.log('Listening to port 3000...');
});
最后我发送了我的数据作出反应:
class MainApp extends Component{
constructor(props){
super(props);
this.state = {
data: null
}
}
componentDidMount() {
this.getInitial();
}
getInitial() {
fetch('/')
.then(resp => resp.json())
.then(data => this.setState({
data: data.rates
}))
.then(() => console.log('this is is a state >>>>+++', this.state))
.catch(err => console.log(err))
}
render(){
return (
<div>
<h1>HELLO WORLD FROM REACT CLIENT FRONTEND! PP</h1>
<p>{this.state.data}</p>
</div>
);
}
}
出于某种原因,当我运行我的代码时,我没有在我的快递上获得任何console.log而我收到此错误:SyntaxError: Unexpected token < in JSON at position 0
我知道为什么我不能改变状态会有什么问题?以及请求为什么不运行?
答案 0 :(得分:2)
问题不在于React。数据采用JSON格式,里面有一堆键,值。您需要使用map函数来呈现{this.state.data}。你不能像这样调用整个JSON对象。您必须深入挖掘JSON对象并获得所需的一切。
假设您有以下JSON数据。
Server.R
sqlOutput<- reactive({
sqlInput<- paste("select distinct ASSET_CLASS from DUMMY_TABLE")
dbGetQuery(con, sqlInput)
})
UI.R
selectInput('pick_assetclass',label ='Asset Class',choices=sqlOutput(),selected = NULL, multiple = FALSE,width="450px"),
你不能只说{this.state.data}。在这种情况下,你可能会做这样的事情{this.state.data.crypto.BTC.name}来获取BTC加密符号的名称。使用map函数,您可以获取所有加密符号的名称和价格,假设有更多。
答案 1 :(得分:1)
实际上您的服务器上的代码不会发送任何响应。当您在服务器上使用console.log时 - 您将在终端中看到消息,您可以在其中执行命令“nodejs app.js”或其他一些启动服务器。要发送响应,根据您使用的节点框架,您应该执行以下操作:
router.get('/', (req, res, next) => {
...
res.setHeader('Content-Type', 'application/json');
res.send(SOME_JSON);
});
同样如我所见,您的服务器正在侦听端口3000,但是获取请求不在那里