Взяв данные Ax ios .get () и отобразив их в компоненте React - PullRequest
Новая
       4

Взяв данные Ax ios .get () и отобразив их в компоненте React

0 голосов
/ 13 апреля 2020

У меня проблемы с отображением данных с помощью компонента React в таблице.

Цель: отображение данных MongoDB в компоненте React и выяснение, почему этот процесс данных не работает.

Что здесь не так? Я знаю, что это не 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();
 });

Реагировать на компонент вместе с загрузкой данных внутри компонента 

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;

Ответы [ 2 ]

0 голосов
/ 13 апреля 2020

Итак, вам нужно сделать две вещи ...

  1. Измените res.send (userContacts ['contacts']) на res. json (userContacts ['contacts'] ), потому что .send для текста не json.
  2. Таким образом, вы передаете fakedata в компонент, вместо этого вы должны передать this.state.contacts и передать fakedata при инициализации состояния, поэтому вместо контактов: {} do contacts: подделка
0 голосов
/ 13 апреля 2020

Я думаю, что проблема может быть в том, что вы забыли изменить 

data = { fakedata }

на 

data = { this.state.contacts }

в методе рендеринга.

...