javascript - 反应JS | 无法获取 ComponentDidMount 上的数据
问题描述
我正在从本地 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 UI 中,我有一个用户列表。当我点击其中一个用户时,我会被重定向到一个新页面,并且 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;
})
}
};
你看到它有什么错误吗?
解决方案
你没有在你的 'name' 参数中getUser()
传递,尝试传递:
fetchUser = () => {
getUser('USERNAME').then(({ data }) => {
this.setState({ user: data });
});
};
推荐阅读
- amazon-web-services - 如何为域和子域安装 SSL 证书
- celery - Django/Celery:max_retries 用于重试,但打印值始终是 Celery 默认值 (3)
- python - 如何使用熊猫更改转置数据框的布局
- java - Gradle bootrun 使用 openjdk 11 失败
- java - 由于 Kotlin 中未解析的引用,无法设置文本或可绘制对象
- slack - 松弛螺栓清除视图堆栈
- java - 尝试更改控制器类 (javafx) 中图像 (FXML) 的 url
- angular - Angular 类型不存在属性
- typescript - TypeScript大括号在函数头上有2个变量?
- qt - 使用 QList
在 connect() 调用中