В приложении MERN-стека я хотел бы запросить данные из схемы конкретного пользователя на основе параметров url. Например, http://localhost: 3000 / user / User1 будет отображать данные от пользователя 1. Я использую redux-реагировать для управления состоянием. Вот то, что у меня сейчас есть, и вот что происходит.
Компонент страницы пользователя
import React, { Component } from "react";
import {getUser} from '../../actions/userActions';
import {connect} from 'react-redux'
class Userpage extends Component {
componentDidMount() {
getUser(this.props.match.params.username)
}
render() {
return (
<div>
<h1>Hello</h1>
<h3>{this.props.user.name}</h3>
<h3>{this.props.user.email}</h3>
</div>
);
}
}
const mapStatetoProps = state => {
return{user: state.user}
};
export default connect(mapStatetoProps, getUser) (Userpage)
userActions
import axios from 'axios';
import {GET_USER} from './types';
export const getUser = username => dispatch => {
axios
.get(`/api/users/${username}`)
.then(({res}) =>
dispatch({
type: GET_USER,
payload: username
})
)
};
userReducer
import { GET_USER } from "../actions/types";
const initialState = {
user: {},
};
export default function(state = initialState, action) {
switch (action.type) {
case GET_USER:
return{
...state,
user: action.payload,
}
}
Затем в маршруте api / users у меня есть следующее:
router.get("/:username", (req, res) => {
User.findOne({username: req.params.username})
.then(user => res.json(user))
});
Помимо состояния пользователя, возвращающегося пустым, вот некоторые ошибки, которые я получаю. В командной строке я иногда получаю
Не удалось запросить прокси / api / users / function% 20 (действие)% 20% 7B% 20% 20% 20% 20% 20% 20% 20% 20if% 20 (TypeOf% 20action% 20% === 20'function ')% 20% 7B% 20% 20% 20% 20% 20% 20% 20% 20% 20% 20return% 20action (отправка,% 20getState,% 20extraArgument);% 20% 20% 20% 20% 20% 20% 20% 20% 7D% 20% 20% 20% 20% 20% 20% 20% 20return% 20дальше (действие);% 20% 20 % 20% 20% 20% 20% 7D с локального хоста: от 3000 до http://localhost: 5000 .
, а также
mapDispatchToProps () в Connect (Userpage) должен возвращать простой объект. Вместо этого получил неопределенный.
Любая помощь или руководство будет принята с благодарностью.