useEffect Hook 未触发包含在其中的函数

Question

我的 reactjs 应用程序中有以下组件：

import React, { useEffect } from 'react';
import { Helmet } from 'react-helmet';
import { connect } from 'react-redux';    
import MovieList from '../components/MovieList';
import styled from 'styled-components';
import { getMoviesDiscover} from '../actions';


const Wrapper = styled.div`
    display: flex;
    width:100%;
    flex-direction: column;
`;


const Discover = ({
    geral,
    movies
}) => {

    const query = 'popular';

    useEffect( () => {
        getMoviesDiscover( query );
    } , [] );

    if( movies.loading ) {
        return (
            <div>
                Movies are loading..
            </div>
        )
    }

    return (
        <Wrapper>
            <Helmet>
                <title>Danm Gurl</title>
            </Helmet>
            <MovieList 
                movies={ movies }    
            />
            <MovieList 
                movies={ movies }    
            />
        </Wrapper>
    )

}

const mapStateToProps = ({ geral, movies }) => {
    return { geral, movies };
};

export default connect(
    mapStateToProps,
    { getMoviesDiscover }
)(Discover);

如你所见，我正在像这样使用 React Hook useEffect ::-

useEffect( () => {
            getMoviesDiscover( query );
} , [] );

问题是如果我在 useEffect 中添加 console.log ，我会在控制台中看到 console.log 。但是函数 getMoviesDiscover 永远不会执行。 getMoviesDiscover 函数位于外部文件中，如下所示：

export const getMoviesDiscover = ( name , page ) => async ( dispatch , getState ) => {
    console.log('OK !')
    dispatch({ type : 'FETCH_MOVIES_LOADING' })
    const res = await tmdbAPI.get(`https://api.themoviedb.org/3/movie/${name}?api_key=<MY_API_KEY>` , {
        params: {
            page
        }
    });
    await dispatch({
        type: 'FETCH_MOVIES_DISCOVER',
        payload: res.data
    });
    dispatch({ type : 'FETCH_MOVIES_FINISHED' })
}

为什么我的 useEffect Hook 没有调用函数？

Answer 1

所以现在正在发生的事情是直接调用从“../actions”导入的 (thunk) 函数 getMoviesDiscover，而不是传递给 mapDispatchToProps 的函数。所以你需要在你的道具中解构这个功能，例如 ({ geral, movies, getMoviesDiscover }) => {

您可能还需要执行 getMoviesDiscover as myNewFuncName 以避免影子变量错误

useEffect Hook 未触发包含在其中的函数

useEffect Hook not firing function enclosed inside it

reactjs

react-redux

react-hooks

redux-thunk

use-effect