反应状态未定义

Question

问题是，当我第一次登录时，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,
                user: null,
                isAuthenticated: false,
                isLoading: false,
            }
        default:
            return state;
    }
}

我不知道我错过了什么。我检查并搜索了一些答案，我确实检查了道具是否为空但仍然没有变化