Question

我正在尝试获取我的api的以下结果（效果很好） http://localhost:5000/api/continents

{"data":[{"continentId":3,"CName":"Atlantis"},{"continentId":2,"CName":"Devias"},{"continentId":1,"CName":"Lorencia"}]}

放入react组件（开始时是一个简单的数组）。

从 server.js 中提取的端点代码：

app.get('/api/continents', (req, res) => {
    connection.query(SELECT_ALL_CONTINENTS_QUERY, (err, results) => {
        if(err){
            return res.send(err)
        }
        else{
            return res.json({
                data: results
            })
        }
    });
});

这是我的 continents.js 代码：

import React, { Component } from 'react';
import './continents.css';

class Continents extends Component {
    constructor() {
        super();
        this.state = {
            continents: []
        }
    }

    ComponentDidMount() {
        fetch('http://localhost:5000/api/continents')
            .then(res => res.json())
            .then(continents => this.setState({continents}, () => console.log('Continents fetched..', continents)));
    }

  render() {
    return (
      <div>
        <h2>Continents</h2>
      </div>
    );
  }
}

export default Continents;

这是 App.js 代码：

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Continents from './components/continents/continents';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Developed with NodeJS + React</h1>
        </header>
        <Continents />
      </div>
    );
  }
}

export default App;

问题：

大陆数组为空。没有提取数据。但是，没有错误。如果有人可以引导我朝正确的方向解决这个问题，我将不胜感激。非常感谢。

Answer 1

@Razvan您能否请更正 componentDidMount 方法的名称。它应该是 componentDidMount ，而不是 ComponentDidMount 。 C必须是小写字母。

Answer 2

我认为从您的API服务调用返回的数据结构包含一个data键。尝试将setState更改为：

this.setState({continents: continents.data})

如果那不能解决问题，我会仔细检查您传递的数据结构的形状，因为逻辑看起来是正确的。

Answer 3

您的设置状态错误，

您的nodejs正在将对象发送到数据内部

this.setState({continents: continents.data})

您的ComponentDidMount应该使用小写的c，因此应该是componentDidMount

Answer 4

fetch在某些浏览器上存在问题。我们在所有iPhone ios11野生动物园浏览器的Samsung Native Browser中都遇到了问题。我们应用的修复程序是添加凭据 fetch（'/ users'，{ 凭据：“同源” }）

以下是从https://github.com/github/fetch#sending-cookies复制的

•Firefox 39-60 •铬42-67 •Safari 10.1-11.1.2 如果针对这些浏览器，建议始终指定凭据：对于所有获取请求，都明确指定“ same-origin”，而不要依赖默认值： fetch（'/ users'，{ 凭据：“同源” }）

React + NodeJs提取问题

4 个答案: