Question

我正在尝试获取从url返回的数据。卷曲到URL结果如下：

[{“ name”：“ Hello World！”}]

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

substitute()

我的contact.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;

数据未呈现或记录。我的获取方式有问题吗？

编辑：该问题与CORS有关。不知道为什么使用flask_cors无法解决它。我的服务器看起来像：

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

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

反应不读取从烧瓶GET端点返回的json

1 个答案: