Reactjs render方法中的Redux状态为null，即使在Redux状态正确更新之后也是如此

我正处于react的学习阶段，正在创建一个小应用程序，从firebase表中获取用户愿望列表并更新redux存储，我试图在render方法中访问该redux存储，但当我在render方法中console.logthis.props.wishlist时，其显示为空。Redux状态已正确更新。使用redx开发工具进行检查。

从firebase API获取愿望列表数据的操作创建者

export const fetchWishlist = (email)=> {
    return dispatch => {
        dispatch(fetchWishlistStart());
        let rawMovieId=[];
        let uniqueMovieIdList = [];
        const queryParams ='?orderBy="email"&equalTo="'+email+'"';
        axios.get('https://movie-project-6fc34.firebaseio.com/wishlist.json'+queryParams)
        .then (response=>{
            for(let key in response.data){
                rawMovieId.push(response.data[key].movieId)
            }
            uniqueMovieIdList =  [ ...new Set(rawMovieId) ];
            dispatch(fetchMovieDetailsForWishlist(uniqueMovieIdList))   
        })
        .catch(error=> {
            console.log(error);
        }) 
    }
}

export const setMovieDetailsForWishlist = (movieDetailsList)=> {
    return {
        type:actionType.SET_MOVIEDETAILS_WISHLIST,
        movieDetailsList:movieDetailsList
    }
}

export const fetchMovieDetailsForWishlist = (movieList) => {
    return dispatch => {
        dispatch(fetchWishlistSuccess());
        let updatedMovieList = []       
        movieList.map((currItem)=>{
            let final_api_url = api_url+movieDetails_api_end_point+currItem+api_key+'&language='+language
            axios.get(final_api_url)
            .then(response=>{
                updatedMovieList.push({
                    title:response.data.title,
                    movieId:response.data.id,
                    poster:response.data.poster_path
                })
            })
            .catch(error=>{
                console.log(JSON.stringify(error));
            })
        })
        dispatch(setMovieDetailsForWishlist(updatedMovieList));         
    }
}

搅拌减速机--

愿望列表组件

import React, { Component } from 'react';
import {connect} from 'react-redux';
import {withRouter} from 'react-router-dom';
import * as action from '../store/actions/index'

export class Wishlist extends Component {


    componentDidMount() {           
        this.props.fetchWishlist(window.localStorage.getItem('email'));


    render() {
        let wishListPageContent = '<div> Loading........</div>'
        let userWishlistDetails = this.props.wishlist
        console.log(userWishlistDetails);
        if (!this.props.showLoader) {
            wishListPageContent = (
            <div> wishlist component</div>

            )
        }           
        return (
            <div>
                {wishListPageContent}
            </div>
        );
    }
}

const mapStateToProps = state => {      
    return {
        userEmail:state.authState.userEmail,
        wishlist:state.wishlistState.wishList,
        isAuthSuccess:state.authState.isAuthSuccess,
        showLoader:state.wishlistState.showLoader 
    }
}

const mapDispatchToProps = dispatch => {
    return {
        fetchWishlist:(email)=>dispatch(action.fetchWishlist(email)),
        fetchMovieDetailsForWishlist:(movieList)=>dispatch(action.fetchMovieDetailsForWishlist(movieList))
    }
}

export default withRouter(connect(mapStateToProps,mapDispatchToProps)(Wishlist));

import React，{Component}来自'React'；
从'react redux'导入{connect}；
从“react router dom”导入{withRouter}；
从“../store/actions/index”导入*作为操作
导出类愿望列表扩展组件{
componentDidMount（）{
this.props.fetchWishlist（window.localStorage.getItem（'email'）；
render（）{
让wishListPageContent='Loading……。'
让userWishlistDetails=this.props.wishlist
console.log（userWishlistDetails）；
如果（！this.props.showLoader）{
wishListPageContent=(
愿望列表组件
)
}           
返回(
{wishListPageContent}
);
}
}
常量mapStateToProps=state=>{
返回{
userEmail:state.authState.userEmail，
愿望列表：state.wishlistState.wishlist，
isAuthSuccess:state.authState.isAuthSuccess，
showLoader:state.wishlistState.showLoader
}
}
const mapDispatchToProps=调度=>{
返回{
fetchWishlist：（email）=>dispatch（action.fetchWishlist（email）），
fetchMovieDetailsForWishlist：（movieList）=>dispatch（action.fetchMovieDetailsForWishlist（movieList））
}
}
使用路由器导出默认值（connect（mapStateToProps，mapDispatchToProps）（Wishlist））；

您是否正确地将您的组件连接到了从“react redux”导入{connect}；？@reg是的，更新了wishlist组件文件的代码。在您返回reducer中的状态（在

案例actionType.SET_MOVIEDETAILS_wishlist:

之前，您能否给出

操作的日志。movieDetailsList

）？为了确保您实际上没有将

null

推送到wishList。我认为它在

fetchMovieDetailsForWishlist

方法中，final\u api\u url的值是多少？您是否没有将对象放入字符串中？（currItem）所以最终解决了问题。问题是fetchMovieDetailsForWishlist操作创建者。我在每次api调用后更新状态，但正确的方法是在所有响应可用后只更新一次状态。我使用了async/await，它工作得非常好。您是否正确地将组件与

import{connect}连接从“react redux”；

？@reg是的，我更新了wishlist组件文件的代码。在返回reducer中的状态之前（在

案例actionType.SET_MOVIEDETAILS_wishlist:

中），能否给出

操作的日志？为了确保您实际上没有将
null
推送到wishList。我认为它在
fetchMovieDetailsForWishlist
方法中，final\u api\u url的值是多少？您是否没有将对象放入字符串中？（currItem）所以最终解决了这个问题。问题在于fetchMovieDetailsForWishlist操作创建者。我在每次api调用后更新状态，但正确的方法是在所有响应可用后只更新一次状态。我使用了async/Wait，它工作得非常好。
import React, { Component } from 'react';
import {connect} from 'react-redux';
import {withRouter} from 'react-router-dom';
import * as action from '../store/actions/index'

export class Wishlist extends Component {


    componentDidMount() {           
        this.props.fetchWishlist(window.localStorage.getItem('email'));


    render() {
        let wishListPageContent = '<div> Loading........</div>'
        let userWishlistDetails = this.props.wishlist
        console.log(userWishlistDetails);
        if (!this.props.showLoader) {
            wishListPageContent = (
            <div> wishlist component</div>

            )
        }           
        return (
            <div>
                {wishListPageContent}
            </div>
        );
    }
}

const mapStateToProps = state => {      
    return {
        userEmail:state.authState.userEmail,
        wishlist:state.wishlistState.wishList,
        isAuthSuccess:state.authState.isAuthSuccess,
        showLoader:state.wishlistState.showLoader 
    }
}

const mapDispatchToProps = dispatch => {
    return {
        fetchWishlist:(email)=>dispatch(action.fetchWishlist(email)),
        fetchMovieDetailsForWishlist:(movieList)=>dispatch(action.fetchMovieDetailsForWishlist(movieList))
    }
}

export default withRouter(connect(mapStateToProps,mapDispatchToProps)(Wishlist));