如何解决反应状态未定义
问题是,当我第一次登录时,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 举报,一经查实,本站将立刻删除。