useEffect Hook 不会触发包含在其中的函数答案

【问题标题】：useEffect Hook not firing function enclosed inside ituseEffect Hook 不会触发包含在其中的函数
【发布时间】：2020-01-23 05:18:04
【问题描述】：

我的 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 没有调用函数？

【问题讨论】：

getMoviesDiscover 看起来是一个 curried 函数，您只是将 name 参数传递给它，它正在返回您尚未调用的实际异步函数。也许你仍然需要调用一个调用，比如getMoviesDiscover('popular')()。
@DrewReese 是对的。我认为这里的主要问题是您没有以正确的方式绑定您的 getMoviesDiscover 操作。尝试将其添加到组件的道具中。如果这没有帮助，请尝试使用 bindActionCreators 显式创建 mapDispatchToProps 函数，并在您的 getMoviesDiscover 操作中使用并将其传递给 connect

标签： reactjs react-redux react-hooks redux-thunk use-effect

【解决方案1】：

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

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

【讨论】：