如何使用 ReactJS 获取数组或 json 对象

Question

我正在使用 MERN 堆栈并且是初学者。 我的 express 应用程序在端口 3001 上运行，这是我的 dbconn 路由。 它成功提取了查询，如果我导航到“localhost:3001/dbconn”，它会显示 docs 数组。

 const mongoose = require('mongoose') const MongoClient = require('mongodb').MongoClient; const express = require('express'); const router = express.Router(); const uri ='mongodb+srv://<user>:<password>@wager0-mhodf.mongodb.net/test?retryWrites=true&w=majority'; const client = new MongoClient(uri, { useUnifiedTopology: true, useNewUrlParser: true }); router.get('/', function(req, res, next) { res.header('Access-Control-Allow-Origin', '*'); //Connect to db client.connect(err => { console.log("Connected successfully to server"); //navigate to correction const collection = client.db("wager0").collection("gameTypes"); //Get all rows in db collection.find().toArray(function(err, docs) { res.send(docs); }); client.close(); }); }); module.exports = router;

但是，当我尝试在我的 React 应用程序中获取这个数组时，它只是在拉一个空数组。 下面是我的 Test 组件的代码，然后在客户端（react）应用程序的 app.js 文件中呈现。 我真正需要做的是创建一个包含所有可用游戏类型的下拉列表，但只能满足于能够获取数组。

 // Dependencies import React, {Component} from 'react'; class Test extends Component{ constructor(props){ super(props); this.state = {gameTypes: []}; } componentDidMount(){ fetch('http://localhost:3001/dbconn', { headers: { 'Content-Type': 'application/json' } }) .then(res => this.setState({gameTypes: res})); console.log(this.state.gameTypes); } render (){ return( <div className="GameTypes"> <h1>Game Types</h1> <div> <select> <option>test</option> </select> </div> </div> ) } } export default Test;

Answer 1

你几乎接近。 只需在 promise resolve 中控制台登录并使用模板中的状态即可。 像这样：

import React, { Component } from 'react';

class Test extends Component {
  constructor(props) {
    super(props);
    this.state = { gameTypes: [] };
  }
  async componentDidMount() {
    fetch('http://localhost:3001/dbconn', {
      headers: {
        'Content-Type': 'application/json'
      }
    }).then(res => {
      this.setState({ gameTypes: res });
      console.log(this.state.gameTypes);
    });
  }

  render() {
    return (
      <div className="GameTypes">
        <h1>Game Types</h1>
        <div>
          <select>
            {this.state.gameTypes.map(gameType => (
              <option>{gameType.name}</option>
            ))}
          </select>
        </div>
      </div>
    );
  }
}

export default Test;

Answer 2

 // Dependencies import React, {Component} from 'react'; class Test extends Component{ constructor(props){ super(props); this.state = {gameTypes: []}; } componentDidMount(){ fetch('http://localhost:3001/dbconn', { headers: { 'Content-Type': 'application/json' } }).then(res => res.json()) .then(data => this.setState({gameTypes: data})); console.log(this.state.gameTypes); } render (){ return( <div className="GameTypes"> <h1>Game Types</h1> <div> <select> <option>test</option> </select> </div> </div> ) } } export default Test;

使用上面的代码片段更改您的代码。 在反应中使用 fetch api 时，您需要先将响应转换为 JSON，然后再次需要编写 .then 函数。 在第二个 .then 函数中，您将获得数据。

不要在 setState() 之后使用 console.log() 检查状态值，因为 react 的 setState 方法是异步的。