Могу ли я использовать функцию dispatch() в компоненте класса?

#javascript #reactjs #react-native #redux

Вопрос:

Я хочу использовать функцию отправки() в компоненте класса

 import React from "react";
import { connect } from "react-redux";
import { useDispatch } from "react-redux";
import {toDo} from "../patials/user";

class SignUp extends React.Component {
  constructor(props) { 
    super(props);
    this.onHandle = this.onHandle.bind(this);
  }
  
 onHandle() {
   const dispatch = useDispatch();
   dispatch(toDo());
 }
render() {
  return(
   <button onClick={onHandle}>Action</button>
  );
}
} 
export default connect()(SignUp)
 

Я получил ошибку:
Крючок реакции «useDispatch» не может быть вызван в компоненте класса. Крючки React должны вызываться в компоненте функции React или пользовательской функции крючка React-крючки/правила крючков

Ответ №1:

Вы не можете использовать useDispatch в компоненте класса react, для компонента класса вам необходимо сопоставить отправку с реквизитами и использовать его следующим образом

 // components/AddTodo.js

import React from 'react'
import { connect } from 'react-redux'
import { addTodo } from '../redux/actions'

class AddTodo extends React.Component {
  // ...

  handleAddTodo = () => {
    // dispatches actions to add todo
    this.props.addTodo(this.state.input)

    // sets state back to empty string
    this.setState({ input: '' })
  }

  render() {
    return (
      <div>
        <input
          onChange={(e) => this.updateInput(e.target.value)}
          value={this.state.input}
        />
        <button className="add-todo" onClick={this.handleAddTodo}>
          Add Todo
        </button>
      </div>
    )
  }
}

export default connect(null, { addTodo })(AddTodo)