Question

我有一个React客户端试图使用'fetch'API向我创建的node.js Express API发出GET请求。我启用了CORS，并在这里浏览了许多问题，无法弄清楚为什么get请求不会在我的本地主机React应用程序上显示数据。在控制台日志中显示 In the console log it displays this...

import React, { Component } from 'react';


export default class Drinker extends Component {
  constructor(props) {
    super(props);

    this.state = {
      data: [],
      isLoading: true,
    };
  }

  componentDidMount(){

    fetch('http://localhost:5000/api/getCustomers', {
               mode: 'no-cors', // 'cors' by default
               headers: {
                      'Accept': 'application/json',
                      'Content-Type': 'application/json',
     }}).then(response => {
        if (response.status >= 304) {
          return response.json();
        } else {
          throw new Error('Something went wrong ...');
        }
      }).then(data => {
        console.log(data.results);
        this.setState({ data: data.results, isLoading: false });

        }
      ).catch(error => {
    console.log(error);
    this.setState({ error, isLoading: false });
  });


  }


  render(){

    if(this.state.isLoading){
      return(
        <h1>
        loading...
        </h1>
      )
    }

    return(
      <ul>
           {this.state.data.map(drinker =>
             <li>
               <p>{drinker.name}</p>
             </li>
           )}
         </ul>
    );
  }

}

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

我使用邮递员，每次都得到很好的要求。这是邮递员对我要提取的网址的回复...

{
"results": [
    {
        "name": "Jack",
        "address": "NJ"
    },
    {
        "name": "Steve",
        "address": "NJ"
    },
    {
        "name": "Denny",
        "address": "NJ"
    },
    {
        "name": "John",
        "address": "NJ"
    }
]
}

Answer 1

我想出了答案，我的Express应用正在将回复发送为...

  res.status(200); // sends a status code
  res.json({results}); // sends results received from sql

但我将其更改为此，现在可以使用...

  res.status(200); // sends a status code
  res.send(JSON.stringify(results)); // sends results recieved from sql

我仍然不太明白为什么它不能以json的形式发送，而是以Express中的文本字符串形式发送的原因，React现在显示数据。

Answer 2

仅当状态码在200-299之间时，

position(prefixes.value in keys.value)=1才是response.ok。由于请求返回304，因此它将为true。这就是为什么重新加载页面时不会显示数据的原因。有关false API中response的属性，请参考Mozilla文档。

https://developer.mozilla.org/en-US/docs/Web/API/Response#Properties

React / Express Fetch请求不显示Json对象数组

2 个答案: