Reactjs Useffect钩子内部不包含点火功能

我的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);

---

问题是如果我在

useffect

中添加了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' })
}

export const getMoviesDiscover=（名称，页面）=>async（调度，getState）=>{
console.log（'OK！'）
分派（{type:'FETCH\u MOVIES\u LOADING'}）
const res=wait tmdbAPI.get(`https://api.themoviedb.org/3/movie/${name}？api_key=`{
参数：{
页
}
});
待命({
键入：“获取电影\u发现”，
有效载荷：res.data
});
分派（{type:'FETCH_MOVIES_FINISHED'}）
}

---

为什么我的useEffect钩子没有调用该函数？

现在发生的事情是，直接调用从“../actions”导入的（thunk）函数

getMoviesDiscover

，而不是传递到

mapDispatchToProps

的函数。所以你需要在你的道具中解构这个函数，例如。

({
杰拉尔，
电影,，
getMoviesDiscover
}) => {

---

您可能还需要执行

getMoviesDiscover as myNewFuncName

，以避免阴影变量错误

，因此现在发生的是导入（thunk）直接调用来自“../actions”的函数

getMoviesDiscover

，而不是传递到

mapDispatchToProps

的函数。因此，您需要在您的道具中分解此函数，例如。

({
杰拉尔，
电影,，
getMoviesDiscover
}) => {

---

您可能还需要执行

getMoviesDiscover as myNewFuncName

以避免阴影变量错误

getMoviesDiscover

看起来是一个curried函数，您只需向它传递

name

参数，它将返回您尚未调用的实际异步函数。也许您仍然需要调用一个调用，som例如

getMoviesDiscover（'popular'）（）

@DrewReese是正确的。我认为这里的主要问题是您没有以正确的方式绑定

getMoviesDiscover

操作。尝试将其添加到组件的道具中。如果没有帮助，请尝试显式创建一个

mapDispatchToProps

函数，该函数使用

getMoviesDiscover

上使用的

bindActionCreators

e> 动作并将其传递给

connect

getMoviesDiscover

看起来是一个常用函数，您只需将

name

参数传递给它，它将返回您尚未调用的实际异步函数。也许您仍然需要调用，类似于

getMoviesDiscover（'popular'）（）

@DrewReese是正确的。我认为这里的主要问题是您没有以正确的方式绑定

getMoviesDiscover

操作。尝试将其添加到组件的道具中。如果没有帮助，请尝试显式创建一个

mapDispatchToProps

函数，该函数使用

getMoviesDiscover

上使用的

bindActionCreators

e> 操作并将其传递给

connect

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' })
}