获取 Axios.get() 数据并在 React 组件中显示答案

【问题标题】：Taking Axios.get() data and displaying it in React component获取 Axios.get() 数据并在 React 组件中显示
【发布时间】：2020-07-25 17:18:03
【问题描述】：

我无法通过表格中的 React 组件显示数据。

目标：在 React 组件中显示 MongoDB 数据，并了解为什么此数据处理不起作用。

这里出了什么问题？我知道这不是 HTTP 请求，所以数据格式似乎是个问题。

供参考：

HTTP 请求

app.get('/api/people/fetchall', requireLogin, async (req, res) => {

  const userContacts = await User.findOne({_id: req.user._id}, 'contacts');
  res.send(userContacts['contacts']);
  console.log(userContacts['contacts']);
 });

联系人 HTTP POST

app.post('/api/people/add', requireLogin, async (req, res) => {
    console.log(req.body.name);
    const { name, company, linkedin, department, email } = req.body;
    const newcontact = new AddContact({
      _user: req.user.id,
      name: name,
      company: company,
      linkedin: linkedin,
      department: department,
      email: email,
     dateUpdated: Date.now()
   });
   User.findByIdAndUpdate(
       {_id: req.user._id},
       {$push: {contacts: newcontact}},
       {safe: true, upsert: true},
       function(err, model) {
           console.log(err);
       }
   );
//Our user to add Contact to, and find the contacts array
   const user = await req.user.save();
 });

React 组件，以及在组件内加载数据

import React, {Component} from 'react';
import MaterialTable from 'material-table';
import axios from 'axios';

const fakedata = [{'name': 'Elliot Kang','company': 'Employableh','linkedin': 'linkedin.com/en/elliotkang7',
'department': 'PM','email': 'elliot@employableh.com'}, {'name': 'Elliot Kon','company': 'Employableh','linkedin': 'linkedin.com/en/elliotkang7',
'department': 'PM','email': 'elliot@employableh.com'}];

class ContactDisplay extends Component {

  constructor() {
    super();
    this.state= {contacts: {},
      columns: [
        {title: 'Name', field: 'name'},
        {title: 'Company', field: 'company'},
        {title: 'Linkedin', field: 'linkedin'},
        {title: 'Department', field: 'department'},
        {title: 'Email', field: 'email'}
      ],

  }
}

  handleChange(event) {
    this.setState({ [event.target.name]: event.target.value });
  }

  componentDidMount() {
    axios.get('/api/people/fetchall').then(res => {
      console.log(res.data);
      this.setState({contacts: res.data});
    });
  }


  render() {
    return(
      <MaterialTable
      title='Contacts'
      columns = {this.state.columns}
      data = {fakedata}
      />
    );


  }
}

export default ContactDisplay;

【问题讨论】：

什么是问题？你的 console.log 显示什么？为什么客户端只使用 GET 时显示 POST？
想要向回答问题的人展示我的架构是什么样的

标签： javascript reactjs mongodb http axios

【解决方案1】：

我认为问题可能是你忘了改变

data = { fakedata }

到

data = { this.state.contacts }

在渲染方法中。

【讨论】：

【解决方案2】：

所以你需要做两件事......

将 res.send(userContacts['contacts']) 更改为 res.json(userContacts['contacts']) 因为 .send 用于文本而不是 json。
所以您在组件中传递 fakedata 而不是应该传递 this.state.contacts 并在初始化状态时传递 fakedata 所以而不是联系人：{} do contacts: fakedata

【讨论】：