React不会回复任何请求

时间:2018-04-13 13:29:33

标签: reactjs express

我正在开发一个应用程序,我正在提出请求并尝试将数据发送回来通过提取做出反应。

到目前为止,这是我的路由器文件:

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

我知道为什么我不能改变状态会有什么问题?以及请求为什么不运行?

2 个答案:

答案 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,但是获取请求不在那里