ComponentDidMount无法正常工作。 ReactJs

Question

我在调用componentDidMount时遇到问题。

情况： 我有2个减速器。他们调用了不同的组件，并且不相交。在ComponentDidMount中的每个组件中，我从Reducer调用函数来设置数据。以两种不同的方式之一不起作用，并且未调用reducer的功能。我遇到类似“无法读取null属性”的错误。重新加载页面后，更改组件的工作。

第一减速器：

-1

第二个减速器：

const SET_VIDEOS = 'SET_VIDEOS';
const TOOGLE_IS_FETCHING = 'TOOGLE_IS_FETCHING';



let initialState = {
    videos: null,
    isFetching: null
}

const youtubeReducer = (state = initialState, action) => {
    switch(action.type){
        case SET_VIDEOS: {
            console.log("muerto.");
            return {...state, videos: action.videos}
        }
        case TOOGLE_IS_FETCHING: {
            return {...state, isFetching: action.isFetching}
        }
        default:{
            return state;
        }
    }
}

export const setVideos = (videos) => ({
    type: SET_VIDEOS, videos   
});

export const setIsFetching = (isFetching) => ({
    type: TOOGLE_IS_FETCHING, isFetching
});

export const getVideosThunkCreator = () => {
    return(dispatch) => {
        dispatch(setIsFetching(true));
        console.log("ALO");
        youtubeApi.getVideos().then(data => {
            dispatch(setVideos(data.items));
            dispatch(setIsFetching(false));
            console.log(data.items);
        })
    }
}

带有First Reducer的容器组件：

let initialState = {
    dj: null,
    isFetching: null
}
const djReducer = (state = initialState, action) => {
    switch(action.type){
        case SET_DJ:{
            console.log("muerto2.");
            return {...state, dj: action.dj}
        }
        case TOOGLE_IS_FETCHING: {
            return {...state, isFetching: action.isFetching}
        }
        default: 
            return state;
    }
}

export const setDj = (dj) => ({
    type: SET_DJ, dj
});
export const setIsFetching = (isFetching) => ({
    type: TOOGLE_IS_FETCHING, isFetching
});

具有Second Reducer的容器组件：

class LivesContainer extends React.Component{
    
    componentDidMount(){
        this.props.getVideosThunkCreator();
        console.log(this.props);
    }

    render(){
        return(
            <>
                {this.props.isFetching ? <Preloader/> : <Lives videos={this.props.videos}/>}
            </>
        );
    }
}

let mapStateToProps = (state) => {
    return{
        videos: state.youtubeReducer.videos,
        isFetching: state.youtubeReducer.isFetching
    }
}

export default connect(mapStateToProps, {
    getVideosThunkCreator,
    setIsFetching
})(LivesContainer);

我遇到错误的第一个组件：

class DjContainer extends React.Component {
    componentDidMount(){
        
        console.log("MOUNT");

        let djId = this.props.match.params.djId;
        if(!djId){
            djId = 0;
        }
        let djs = this.props.djs;

        this.props.setIsFetching(true);

        console.log(djs);
        console.log(djId);

        djs.forEach(dj => {

            if(dj.id == djId){
                this.props.setDj(dj);
                this.props.setIsFetching(false);
            }
        });
        console.log(this.props);
    }
    componentWillUnmount(){
        console.log("UNMAUNT");
    }
    render(){
        return(
            <>
                {this.props.isFetching ? <Preloader/>:
                <Dj {...this.props} dj={this.props.dj} />
                }
            </>
        );
    }
    
}

let mapStateToProps = (state) => ({
   dj: state.djReducer.dj,
   djs: state.djsReducer.djs,
   isFetching: state.djReducer.isFetching
});

let WithUrlDataContainerComponent = withRouter(DjContainer);


export default connect(mapStateToProps,{
    setDj,
    setIsFetching
})(WithUrlDataContainerComponent);

那里的错误：

const Lives = (props) => {

    let bannerId;
    let videoBanner = "https://www.youtube.com/embed/";
    let videos = [];

    props.videos.forEach((video,index) => {
        if(index == 0){
            bannerId = video.contentDetails.videoId;
        }else{
            videos.push(video);
        }
    });

    console.log(videos);

    videoBanner += bannerId;

    let videosMap = videos.map((video,index) => {
        return <Video video={video} key={index}/>
    })

    return(
        <div className={classes.main}>
            <div className={classes.container}>
                <h1>Our videos</h1>
                <div className={classes.videos}>
                    <iframe width="90%" height="80%" src={videoBanner} frameborder="0" allow="accelerometer; autoplay=1; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                    <div className={classes.videoList}>
                        {videosMap}
                    </div>
                </div>
                

            </div>
        </div>
    );
}

来自Secornd组件：

props.videos.forEach((video,index) => {
            if(index == 0){
                bannerId = video.contentDetails.videoId;
            }else{
                videos.push(video);
            }
        });

从那里出现错误：

const Dj = (props) => {
 
    console.log(props);

    let video = "https://www.youtube.com/embed/" + props.dj.video;

    return(
        <div className={classes.main}>
            <div className={classes.container}>
                <h1>{props.dj.name}</h1>
                <iframe width="90%" height="80%" src={video} frameborder="0" allow="accelerometer; autoplay=1; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                <div className={classes.links}>
                    <a href={props.dj.fb} target="_blank">
                        <img src={fb}/>
                    </a>
                    <a href={props.dj.sound} target="_blank">
                        <img src={sound}/>
                    </a>
                    <a href={props.dj.inst} target="_blank">
                        <img src={inst}/>
                    </a>
                </div>
            </div>
        </div>
    );
}