我如何通过此错误无效的挂钩调用。 钩子只能在 function 组件的主体内部调用。 我正在使用 React18

Question

this is the code

import { connect } from "react-redux";
import { useParams } from "react-router-dom";
import ExpenseForm from "./ExpenseForm";
import { editExpense, removeExpense } from '../actions/expenses';
import {useNavigate} from 'react-router-dom';
//import { withRouter } from "react-router-dom";



function EditExpensePage (props){
 const { id } = useParams();
const navigate = useNavigate()
 return(
   <div>
           <ExpenseForm 
           expense={props.expense}
           onSubmit={(expense) =>{
             props.dispatch(editExpense(id,expense))
             navigate('/');
           }}
           />

         <button onClick={()=>{
          props.dispatch(removeExpense({id: props.expense.id}));
          navigate('/');
       }}>Remove</button>
         </div>

         
 );
};

function MapStateToProps(state){
 const { id } = useParams();
 return{
   expense: state.expenses.find((expense)=> expense.id ===  id)
 };
};

   

  export default connect(MapStateToProps)(EditExpensePage);

i am trying to edit an expense with an id so that it can render a component that has the edited item. so far everything is working but after editing the field the component doesnt rerender, it return an error on the console. this is the error Invalid hook call. Hooks can only be called inside of the body of a function component

Answer 1

The reason for the error is you have used useParams inside MapStateToProps which you can not use inside MapStateToProps . You can do something like this:

function MapStateToProps(state,ownProps){
 const { id } = ownProps.match.params;
 return{
   expense: state.expenses.find((expense)=> expense.id ===  id)
 };
};