React / Express Fetch Request не отображает массив объектов Json

Question

У меня есть клиент React, пытающийся использовать API 'fetch' для отправки запроса GET к API-интерфейсу node.js Express, который я сделал. Я включил CORS и просмотрел много вопросов здесь, и не могу понять, почему запрос get не будет отображать данные в моем приложении localhost React. В журнале консоли это отображает В журнале консоли отображается это ...

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>

Я пользуюсь почтальоном и каждый раз получаю хороший запрос. Это мой ответ почтальона на URL, который я собираю ...

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

response.ok - это true, только если код состояния находится между 200-299. Поскольку запрос возвращает 304, он будет false. Вот почему данные не отображаются при перезагрузке страницы. Информацию о свойствах response из API fetch см. В документации Mozilla.

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