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

Question

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

import { useDispatch } from 'react-redux';

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

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

是的，你没有正确使用它，试试这个：

const dispatch = useDispatch()

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

见documentation of useDispatch，有使用示例。

Answer 2

问题是您在类组件的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;