Question

我正在尝试在组件的render函数中使用useDispatch。

import { useDispatch } from 'react-redux';

我有一个输入试图在onChange上使用Dispatch

onChange={() => useDispatch()(update("test"))}

触发onChange时，出现此错误：

无效的挂钩调用。挂钩只能在功能组件的主体内部调用。发生这种情况可能是由于以下原因之一：


您可能使用的React和渲染器版本不匹配（例如React DOM）

您可能正在违反挂钩规则

您可能在同一应用中拥有多个React副本

import React, {
    Component
} from 'react';
import {
    useDispatch
} from 'react-redux';
import {
    update
} from '../store/actions';
class Something extends Component {
    render() {
        return (<input onChange={() => useDispatch()(update("test"))}/>)
    }
}

export default Something;

Answer 1

问题是您正在render中的类组件中使用它。您不能在类组件中使用钩子。这就是错误消息说的原因

无效的挂钩调用。 只能在函数组件的主体内部调用钩子。

（我的重点）。类组件不是功能组件。（这很容易遗漏，如果可能的原因列表中特别提到了类组件，那会很好。）

因此，您希望使其成为功能组件：

import React, {
    Component
} from 'react';
import {
    useDispatch
} from 'react-redux';
import {
    update
} from '../store/actions';
function Something() {                                              // ***
    return <input onChange={() => useDispatch()(update("test"))}/>; // ***
}                                                                   // ***

export default Something;

还请注意the documentation中的警告，上面的内容将导致不必要的渲染，您应该使用useCallback：

import React, {
    Component,
    useCallback
} from 'react';
import {
    useDispatch
} from 'react-redux';
import {
    update
} from '../store/actions';
function Something() {
    const dispatch = useDispatch();            // ***
    const handleChange = useCallback(          // ***
        () => dispatch(update("test")),        // ***
        [dispatch]                             // ***
    );                                         // ***
    return <input onChange={handleChange}/>;   // ***
}

export default Something;

Answer 2

是的，您没有正确使用它，请尝试以下操作：

const dispatch = useDispatch()

...
onChange={() => dispatch(update("test"))}

请参见documentation of useDispatch，其中有其用法示例。

React.js-Redux Hooks无效的Hook调用

2 个答案: