useEffect Hook内没有触发功能

时间:2019-09-23 07:10:45

标签: reactjs redux react-hooks react-thunk

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

File.WriteAllLines(origialFilePath,File.ReadAllLines(originalFilePath).Skip(1));

您可以看到我正在像这样使用React Hook useEffect ::-

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

问题是如果我在useEffect( () => { getMoviesDiscover( query ); } , [] ); 内添加console.log,我会在console中看到console.log。但是函数useEffect从未执行。 getMoviesDiscover函数位于外部文件中,如下所示:

getMoviesDiscover

为什么我的useEffect Hook不调用该函数?

1 个答案:

答案 0 :(得分:1)

所以现在发生的是,直接调用了从'../actions'导入的(thunk)函数getMoviesDiscover,而不是传递给mapDispatchToProps的函数。因此,您将需要在道具中分解此功能,例如 ({ geral, movies, getMoviesDiscover }) => {

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