python - React 不读取从 Flask GET 端点返回的 json

Question

我正在尝试获取从 url 返回的数据。 curl 到 url 结果如下:

[{"name": "Hello World!"}]

以下是我的 App.js 中的代码

import React, { Component } from 'react';
import Contacts from './components/contacts';


class App extends Component {
  render() {
    return (
      <Contacts contacts={this.state.contacts} />
  )
  }
  state = {
    contacts: []
  };

  componentDidMount() {
    fetch('url')
    .then(res => res.json())
    .then((data) => {
      this.setState({ contacts: data })
    })
    .catch(console.log)
  }

}

export default App;

我的 contact.js 包含以下内容:

// src/components/contacts.js

import React from 'react'

const Contacts = ({ contacts }) => {
    return (
    <div>
        <center><h1>Contact List</h1></center>
        {contacts.map((contact) => (
        <div class="card">
            <div class="card-body">
            <h5 class="card-title">{contact.name}</h5>
            </div>
        </div>
        ))}
    </div>
    )
};

export default Contacts

数据不会被渲染或记录。我获取它的方式有问题吗？

编辑:该问题与 CORS 有关。不知道为什么使用flask_cors不能解决这个问题。我的服务器看起来像:

from flask import Flask, request, json
from flask_cors import CORS, cross_origin

app = Flask(__name__)
CORS(app)
app.config['CORS_HEADERS'] = 'Content-Type'

@app.route("/")
def home():
    return json_response([{"name":"Hello World!"}])

def json_response(payload, status=200):
     return (json.dumps(payload), status, {'content-type': 'application/json'})

Answer 1

您可以使用虚拟 api 检查此代码示例，并且您的代码工作正常。

唯一的区别是api不同

    class App extends React.Component {
      state = {
        contacts: []
      };
      render() {
        return (
          <Contacts contacts={this.state.contacts} />
      )
      }
      componentDidMount() {
        fetch(`https://cors-anywhere.herokuapp.com/http://35.222.96.248:5000/`)
        .then(res => res.json())
        .then(data => {
        this.setState({ contacts: data });
      })
      .catch(console.log);
  }
    }
    const Contacts = ({ contacts }) => {
        return (
        <div>
            <center><h1>Contact List</h1></center>
            {contacts.map((contact) => (
            <div class="card">
                <div class="card-body">
                <h5 class="card-title">{contact.title}</h5>
                </div>
            </div>
            ))}
        </div>
        )
    };

Live Demo