ReactJS |Не удается получить данные о ComponentDidMount - PullRequest
Новая
       30

ReactJS |Не удается получить данные о ComponentDidMount

0 голосов
/ 08 марта 2019

Я получаю данные из локального Mock-API. Данные, отправляемые сервером, имеют следующий формат: 

module.exports = [
  {
    username: "george",
    email: "george@test.com",
    group: "foo",
    loggedIn: true
  },
  {
    username: "nick",
    email: "nick@test.com",
    group: "bar",
    loggedIn: false
  }
];

По сути, список пользователей, как вы можете видеть. Уникальный I.D для каждого пользователя - это username. В моем ReactJS U.I у меня есть список пользователей. Когда я нажимаю на одного из пользователей, меня перенаправляют на новую страницу, и URL-адрес меняется в зависимости от пользователя, которого я щелкнул

Но я не могу получить какие-либо данные об этом пользователе. Я получаю пустую строку, напечатанную JSON.Stringify. Это мой кокд: 

<code>/* eslint-disable react/prefer-stateless-function */
import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types';

import PageHeader from './PageHeader';
import Breadcrumb from './Breadcrumb';
import Role from 'shared/common/enums/Role';

import { getUser } from '../../config/service';

class UserDetailsScreen extends Component {
  state = {
    inEditMode: false,
    user: {},
    error: null
  };

  componentDidMount() {
    this.fetchUser();
  }

  fetchUser = () => {
    getUser().then(({ data }) => {
      this.setState({ user: data });
    });
  };

  render() {
    const {user } = this.state;
    return (
      <div className="container-fluid">
        <div><pre>{JSON.stringify(user, null, 2)}
{пользователь && ( <Иерархическая товар = {[ { имя: «Пользователи», URL: «пользователи» }, { имя: user.username, url: `$ {user.username}` } ]} />

{user.username}

)} ); } } экспорт по умолчанию UserDetailsScreen;

getUser() - это функция, которая прослушивает мою локальную конечную точку. Это конечная точка: GET_USER: name =>http://localhost:5000/api/user/${name},.

А вот и getUser(): 

export const getUser = name => {
  const options = {
    method: httpMethod.GET,
    url: endpoint.GET_USER(name)
  };
  return instance(options);
};

Это экземпляр Dyson Server для получения Определенного пользователя с уникальным идентификатором имени пользователя: 

const users = [
    {
    username: "george",
    email: "george@test.com",
    group: "foo",
    loggedIn: true
  },
  {
    username: "nick",
    email: "nick@test.com",
    group: "bar",
    loggedIn: false
  }
]

module.exports = {
  path: '/api/user/:username',
  method: 'GET',
  template: (pathParameters) => {
    return users.find((user) => {
      return user.username === pathParameters.username;
    })
  }
};

Видите ли вы какую-либо ошибку с этим ??

1 Ответ

1 голос
/ 08 марта 2019

Вы не передаете аргумент 'name' в вашем getUser(), попробуйте передать: 

fetchUser = () => {
    getUser('USERNAME').then(({ data }) => {
      this.setState({ user: data });
    });
  };
...