Javascript 获取Axios.get（）数据并将其显示在React组件中

我无法通过表中的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']);
 });

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;

联系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();
 });

反应组件，以及组件内的加载数据

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']);
 });

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;

import React，{Component}来自'React'；
从“物料表”导入物料表；
从“axios”导入axios；
const fakedata=[{'name'：'Elliot Kang'，'company'：'Employableh'，'linkedin'：'linkedin.com/en/elliotkang7'，
“部门”：“下午”，“电子邮件”：elliot@employableh.com“}，{'name'：'Elliot Kon'，'company'：'Employableh'，'linkedin'：'linkedin.com/en/elliotkang7'，
“部门”：“下午”，“电子邮件”：elliot@employableh.com'}];
类ContactDisplay扩展组件{
构造函数（）{
超级（）；
this.state={contacts:{}，
栏目：[
{title:'Name'，field:'Name'}，
{标题：'公司'，字段：'公司'}，
{标题：'Linkedin'，字段：'Linkedin'}，
{标题：'部门'，字段：'部门'}，
{标题：“电子邮件”，字段：“电子邮件”}
],
}
}
手变（活动）{
this.setState（{[event.target.name]：event.target.value}）；
}
componentDidMount（）{
get（'/api/people/fetchall'）。然后（res=>{
console.log（res.data）；
this.setState（{contacts:res.data}）；
});
}
render（）{
返回(
);
}
}
导出默认联系人显示；

我想问题可能是你忘了换衣服

data={fakedata}

到

data={this.state.contacts}

---

在渲染方法中。

因此您需要做两件事

将res.send（userContacts['contacts']）更改为res.json（userContacts['contacts']），因为.send用于文本而不是json

因此，您要在组件中传递fakedata，而应该传递this.state.contacts，并在初始化状态时传递fakedata，因此，不要传递联系人：{}do contacts:fakedata

---

有什么问题吗？你的console.log显示了什么？当客户机只使用GET时，为什么要显示POST？想向回答问题的人显示我的模式是什么样子的