我如何通过这个错误无效的钩子调用.钩子只能在函数组件的主体内部调用.我正在使用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的支出，这样它就可以呈现一个包含已编辑项目的组件。到目前为止，一切都正常，但在编辑字段后，组件没有重新发送，它在控制台上返回了一个错误。这是错误Invalid hook call。钩子只能在功能组件的主体内部调用

Answer 1

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

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