React.js - Redux Hooks неверный вызов Hook

Question

Я пытаюсь использовать useDispatch внутри функции рендеринга моего компонента.

import { useDispatch } from 'react-redux';

У меня есть вход, который пытается использоватьDispatch для onChange

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

Когда onChangeсрабатывает, я получаю эту ошибку:

Недопустимый вызов ловушки. Хуки могут быть вызваны только внутри тела функционального компонента. Это может произойти по одной из следующих причин:

1. У вас могут быть несовпадающие версии React и средства визуализации (например, React DOM)
2. Возможно, вы нарушаете правила хуков
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;

Answer 2

Да, вы не используете его правильно, попробуйте это:

const dispatch = useDispatch()

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

См. документацию об использованииDispatch , есть пример его использования.