ReactJS |无法获取 ComponentDidMount 上的数据

Question

我正在从本地 Mock-API 获取数据。服务器发送的数据格式如下：

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

基本上，您可以看到一个用户列表。每个用户的唯一 ID 是他们的username。在我的 ReactJS U.I 中，我有一个用户列表。当我点击其中一个用户时，我会被重定向到一个新页面，并且 url 会根据我点击的用户的不同而发生变化

但我无法获取有关该用户的任何数据。我得到一个用JSON.Stringify 打印的空字符串。这是我的代码：

/* 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)}</pre></div>
        {user && (
          <Fragment>
            <Breadcrumb
              items={[
                {
                  name: 'Users',
                  url: 'users'
                },
                {
                  name: user.username,
                  url: `${user.username}`
                }
              ]}
            />
            <h1 className="heading-title">{user.username}</h1>
        )}
      </div>
    );
  }
}

export default 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 服务器实例，用于获取具有用户名作为唯一 ID 的特定用户：

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

你觉得有什么错误吗？

Answer 1

您没有在 getUser() 中传递“名称”参数，请尝试传递：

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