#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)