Estoy aprendiendo React, en una aplicación intento cambiar la descripción y la cantidad y agregar una nota, pero cada vez que intento me sale un error:
Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same appMi código:
import React from "react"; import { useParams } from "react-router-dom"; import { connect } from 'react-redux' import ExpenseForm from "./ExpenseForm"; import { editExpense } from "../actions/expenses"; import { useNavigate } from "react-router-dom"; const EditExpensePage = (props) => { const navigate = useNavigate(); return ( <div> <ExpenseForm expense ={props.expense} onSubmit={(expense) => { props.dispatch(editExpense(props.expense.id, expense)) navigate('/') }} /> </div> ) } const mapStateToProps = (state) => { const params = useParams() return { expense: state.expenses.find((expense) => expense.id === params.id) } } export default connect(mapStateToProps)(EditExpensePage)Como se dice arriba, puede usar un gancho solo dentro de un componente funcional. En su código, está llamando a useParams dentro de mapStateToProps que no es un componente funcional. Le sugiero que no use mapStateToProps ya que ahora está obsoleto y funciona solo con componentes base de clase. Le sugiero que use la nueva sintaxis de react-redux que se basa completamente en ganchos. Puede conocer su documentación aquí https://redux.js.org/
¿Por qué desea connect cuando el componente ya es un componente de función?
import React from "react"; import { useParams } from "react-router-dom"; import { useSelector, useDispatch } from 'react-redux' import ExpenseForm from "./ExpenseForm"; import { editExpense } from "../actions/expenses"; import { useNavigate } from "react-router-dom"; const EditExpensePage = (props) => { const dispatch = useDispatch(); const navigate = useNavigate(); const params = useParams() const expenses = useSelector(state => state.expenses); const expense = expenses.find((expense) => expense.id === params.id) return ( <div> <ExpenseForm expense={expense} onSubmit={(exp) => { dispatch(editExpense(expense.id, exp)) navigate('/') }} /> </div> ) } export default EditExpensePage