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

Question

useDispatch我正在尝试在组件的渲染函数内部使用。

import { useDispatch } from 'react-redux';

我有一个尝试使用Dispatch的输入onChange

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

当 onChange 被触发时，我收到以下错误：

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

1. 您的 React 和渲染器版本可能不匹配（例如 React DOM）
2. 你可能违反了 Hooks 规则
3. 您可能在同一个应用程序中拥有多个 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;

另请注意文档中的警告，上述内容将导致不必要的渲染，您应该使用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;