时间戳

首页 > 解决方案 > 函数未在 Hook 中执行

javascript - 函数未在 Hook 中执行

问题描述

我有一个组件，我想通过一个函数在其中分派 Redux 操作。我不明白的是，该功能没有执行。在console.log()函数调用被记录之前和之后bar()，但是当我尝试console.log()从函数中调用bar()时，这没有任何效果......为什么会这样？

// Foo.js
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import React from 'react';
import { bar } from './actions';

const Foo = () => {
    useEffect(() => {
    console.log('I get logged');
        bar();
    console.log('I get logged too');
    }, [])

    return <Whatever> ... </Whatever>
};


const mapDispatchToProps = dispatch => {
    return bindActionCreators({
        bar,
    }, dispatch)
};

const mapStateToProps = state => {
    const { ... } = state
    return {
        ...: ...
    }
};

export default connect(mapStateToProps, mapDispatchToProps)(Foo);




// actions.js
export const bar = () => async dispatch => {
    console.log('I do not get logged');
    await ... 
    dispatch({ type: ..., ... });
};

标签： javascriptreactjsreduxreact-redux

解决方案

因为bar此时引用您的未绑定操作创建者，而不是来自connect. 你必须使用props.bar才能得到它。但你不应该。

一般来说，你不应该使用connectwith 函数组件，而是使用useDispatchand useSelector react-redux hooks。

所以它应该看起来像

const Foo = () => {
    const dispatch = useDispatch();
    useEffect(() => {
    console.log('I get logged');
        dispatch(bar());
    console.log('I get logged too');
    }, [dispatch])

    return <Whatever> ... </Whatever>
};

没有任何使用connect任何地方。

推荐阅读