【发布时间】：2019-06-03 06:50:47
【问题描述】：
我想在我的应用程序中创建一个公共个人资料页面，但是每当我点击路由时，控制台中就会出现错误。我不明白这是什么问题，请你用你的新眼睛看一下。让我给你更多关于我的问题的信息。
公共路由 - 后端
// @route POST api/profile/user/:user_id
// @desc Get profile by user ID
// @access Public
router.get('/user/:user_id', (req, res) => {
const errors = {};
Profile.findOne({ user: req.params.user_id })
.populate('user', ['name', 'email', 'avatar'])
.then(profile => {
if (!profile) {
errors.nonprofile = 'There is no profile for this user';
res.status(404).json(errors);
}
res.json(profile);
})
.catch(err =>
res.status(404).json({ profile: 'There is no profile for this user' })
);
});
Redux 操作部分
export const getPublicProfileByID = id => dispatch => {
console.log(id);
axios
.get(`api/profile/user/${id}`)
.then(res => {
dispatch({
type: GET_PUBLIC_PROFILE_BY_ID,
payload: res.data
});
})
.catch(err =>
dispatch({
type: GET_PUBLIC_PROFILE_BY_ID,
payload: null
})
);
};
PublicProfile - 反应部分
import React, { Component } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import Spinner from '../common/Spinner';
import { getPublicProfileByID } from '../../actions/profileActions';
import { Link } from 'react-router-dom';
class PublicProfile extends Component {
constructor(props) {
super(props);
}
componentDidMount() {
console.log(this.props);
this.props.getPublicProfileByID(this.props.profile._id);
}
render() {
const { profile, loading } = this.props.profile;
const { auth } = this.props;
console.log(profile);
let profileShow;
if (profile === null || loading) {
profileShow = <Spinner />;
} else {
profileShow = (
<div className="row">
<div className="col-md-4" align="center">
<figure className="figure">
<img
src={auth.user.avatar}
className="figure-img img-fluid rounded"
alt={auth.user.avatar}
/>
</figure>
</div>
<div className="col-md-6">{profile.bio}</div>
<div className="col-md-2">
<ul className="list-group list-group-flush">
<li className="list-group-item">
<div className="row">
<div className="col">
{profile.social ? (
<a href={profile.social.facebook} target="_blank">
<i className="fab fa-facebook" />
</a>
) : null}
</div>
<div className="col">
{profile.social ? (
<a href={profile.social.vk} target="_blank">
<i className="fab fa-vk" />
</a>
) : null}
</div>
<div className="col">
{profile.social ? (
<a href={profile.social.instagram} target="_blank">
<i className="fab fa-instagram" />
</a>
) : null}
</div>
</div>
</li>
{profile.country ? (
<li className="list-group-item">Страна: {profile.country}</li>
) : null}
{profile.city ? (
<li className="list-group-item">Город: {profile.city}</li>
) : null}
{profile.gender ? (
<li className="list-group-item">Пол: {profile.gender}</li>
) : null}
{profile.education ? (
<li className="list-group-item">
Образование: {profile.education}
</li>
) : null}
{profile.languages ? (
<li className="list-group-item">
Языки:{' '}
{profile.languages.map(language => (
<span key={language}>{language}</span>
))}
</li>
) : null}
</ul>
</div>
</div>
);
}
return (
<div className="container">
<div className="row">
<div className="col align-self-center">{profileShow}</div>
</div>
</div>
);
}
}
PublicProfile.propTypes = {
auth: PropTypes.object.isRequired,
getPublicProfileByID: PropTypes.func.isRequired
};
const mapStateToProps = state => ({
profile: state.profile,
auth: state.auth
});
export default connect(
mapStateToProps,
{ getPublicProfileByID }
)(PublicProfile);
Redux Reducer 部分
import {
GET_PROFILE,
PROFILE_LOADING,
CLEAR_CURRENT_PROFILE,
GET_PUBLIC_PROFILE_BY_ID
} from '../actions/types';
const initialState = {
profile: null,
profiles: null,
loading: false
};
export default function(state = initialState, action) {
switch (action.type) {
case PROFILE_LOADING:
return {
...state,
loading: true
};
case GET_PROFILE:
return {
...state,
profile: action.payload,
loading: false
};
case GET_PUBLIC_PROFILE_BY_ID:
return {
...state,
profile: action.payload,
loading: false
};
case CLEAR_CURRENT_PROFILE:
return {
...state,
profile: null
};
default:
return state;
}
}
app.js 中的公共路由
<Route exact path="/leaders/:id" component={PublicProfile} />
【问题讨论】：
-
你的nodejs服务器运行的端口是什么，因为你调用的3000是反应默认端口而不是你的后端端口
-
所有其他路线都可以正常工作。所以我想问题不在于端口。
-
如果其他路由正常工作，那么在查询您的 useId 时未定义，在这种情况下，您发送 404 请参阅后端的 catch 部分
-
领导在这里做什么
.get(api/profile/user/${id})，而你正在点击/leader/api/profile/user/ -
控制台上看不到console.log(id)，id没有被设置为特定数据。