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

Question

这是代码

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

我正在尝试使用 id 编辑费用，以便它可以呈现具有已编辑项目的组件。 到目前为止一切正常，但在编辑该组件不重新呈现的字段后，它会在控制台上返回一个错误。 这是错误无效的挂钩调用。 钩子只能在 function 组件的主体内部调用

Answer 1

错误的原因是您在MapStateToProps中使用useParams ，而在MapStateToProps中无法使用。 你可以这样做：

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