问题描述
问题是,当我第一次登录时,renderList() 或 this.props.user 上的 userId 变量将始终为空。当我刷新它时它会起作用。我尝试在 renderList 函数的第一行检查它,但在我登录后它似乎总是为空。我什至尝试在登录成功后重定向之前调度 fetchBlog 操作。
import React from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import { Card,Button } from 'react-bootstrap';
import { fetchBlogs,deleteBlog } from '../../actions';
class FetchBlogs extends React.Component{
componentDidMount(){
this.props.fetchBlogs();
}
renderButtons(blog,userId){
if(blog._id = userId){
return (
<div>
<Button as={Link} to={`/blogs/edit/${blog._id}`} className="mx-2" variant="outline-warning" size="md">Edit</Button>
<Button onClick={() => {
this.props.deleteBlog(blog._id)
}}
className="mx-2"
variant="outline-danger"
size="md">
Delete
</Button>
</div>
);
}
return '';
}
renderList(){
const userId = this.props.user && this.props.user._id;
return this.props.blogs.map(blog => {
return (
<Card className="m-2" key={blog.title}>
<Card.Body>
<Card.Title as={Link} to={`/blogs/${blog._id}`}>{blog.title}</Card.Title>
<Card.Text>{blog.content}</Card.Text>
</Card.Body>
<div className="mb-2">
{this.renderButtons(blog,userId)}
</div>
</Card>
);
})
}
render(){
return (
<div>
<h2 className="m-2">My Blogs</h2>
{this.renderList()}
</div>
);
}
}
const statetoProps = state => {
return {
blogs: Object.values(state.blogs),user: state.auth.user,}
}
export default connect(statetoProps,{ fetchBlogs,deleteBlog,})(FetchBlogs);
export const login = formValues => async dispatch => {
const config = {
header: {
'Content-Type': 'application/json'
}
};
try{
const res = await portfolios.post('/auth/login',formValues,config)
dispatch({
type: 'LOGIN_SUCCESS',payload: res.data
});
dispatch(fetchBlogs())
history.push('/blogs/all');
}catch(e){
dispatch({
type: 'LOGIN_Failed',});
history.push('/auth/login');
}
}
这是我的 Auth Reducer
const INITIAL_STATE = {
access: localStorage.getItem('access'),isAuthenticated: null,isLoading: false,user: null,}
const authReducer = (state = INITIAL_STATE,action) => {
switch(action.type){
case 'LOGIN_SUCCESS':
case 'REGISTER_SUCCESS':
localStorage.setItem("access",action.payload.token);
return {
...state,access: action.payload.token,user: action.payload.user,isAuthenticated: true,isLoading: false
};
case 'AUTH_ERROR':
case 'LOGIN_Failed':
case 'logoUT_SUCCESS':
case 'REGISTER_FAIL':
localStorage.removeItem('access');
return {
...state,isAuthenticated: false,}
default:
return state;
}
}
我不知道我错过了什么。我检查并搜索了一些答案,我确实检查了道具是否为空但仍然没有变化
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)