使用react js中的props在const中调用函数

Question

我有一个仪表板，里面有一个函数，这是一个模态类型，它包含一个表单。表单完成后，输入的数据会显示在仪表板底部的表上。

目前，表中的数据加载得很好，但每当我点击按钮(打开表单时，当我键入init时，表单就会消失……基本上，点击后表单就会消失。

下面是我的代码。。。感谢

import React, {useState,useContext,useEffect} from 'react';
import TransactionItem from '../components/TransactionItem';
import TransactionService from '../Services/TransactionService';
import Message from '../components/Message';
import { AuthContext } from '../Context/AuthContext';
import { Line, Pie } from "react-chartjs-2";
import {
Card,
CardHeader,
CardBody,
CardFooter,
CardTitle,
Table,
Row,
Col,
Button,
FormGroup,
Input,
Modal
} from "reactstrap";
const Dashboard = props => {
const [transaction,setTransaction] = useState({amount : "", date : "", token : "", meter : "", transactionid : ""});
const [transactions,setTransactions] = useState([]);
const [message,setMessage] = useState(null);
const authContext = useContext(AuthContext);
useEffect(()=>{
TransactionService.getTransactions().then(data =>{
setTransactions(data.transactions);
});
},[]);

function Recharge() {

const [transactionModal, setTransactionModal] = useState(false);
const onSubmit = e =>{
e.preventDefault();
TransactionService.postTransaction(transaction).then(data =>{
const { message } = data;
resetForm();
if(!message.msgError){
TransactionService.getTransactions().then(getData =>{
setTransactions(getData.transactions);
setMessage(message);
});
}
else if(message.msgBody === "UnAuthorized"){
setMessage(message);
authContext.setUser({username : "", role : ""});
authContext.setIsAuthenticated(false);
}
else{
setMessage(message);
}
});
}
const onChange = e =>{
setTransaction({...transaction,[e.target.name] : e.target.value});

}
const resetForm = ()=>{
setTransaction({amount : "", date : "", token : "", meter : "", transactionid : ""});
}
return (
<>
<Button
className="btn-round"
color="success"
type="button"
onClick={() => setTransactionModal(true)}
>Recharge
</Button>
<Modal
isOpen={transactionModal}
toggle={() => setTransactionModal(false)}
modalClassName="modal-register"
>
<div className="modal-header no-border-header text-center">
<button
aria-label="Close"
className="close"
data-dismiss="modal"
type="button"
onClick={() => setTransactionModal(false)}
>
<span aria-hidden={true}>×</span>
</button>
<h3 className="modal-title text-center">Enter Details</h3>
<p></p>
</div>
<div className="modal-body">
<form onSubmit={onSubmit}>
<FormGroup>
<label>Amount</label>
<Input 
defaultValue="" 
placeholder="Enter date" 
name="amount"
value={transaction.amount}
onChange={onChange} 
type="text" />
</FormGroup>
<FormGroup>
<label>Date</label>
<Input 
defaultValue="" 
name="date"
value={transaction.date}
onChange={onChange} 
placeholder="Enter date" 
type="text" />
</FormGroup>
<FormGroup>
<label>Token</label>
<Input 
defaultValue="" 
name="token"
value={transaction.token}
onChange={onChange}
placeholder="Enter token" 
type="text" />
</FormGroup>
<FormGroup>
<label>Meter</label>
<Input 
defaultValue=""
name="meter" 
value={transaction.meter} 
onChange={onChange}
className="form-control"
placeholder="Enter meter" 
type="text" />
</FormGroup>
<FormGroup>
<label>ID</label>
<Input 
defaultValue="" 
placeholder="Enter Id" 
name="transactionid" 
value={transaction.transactionid} 
onChange={onChange}
type="text" />
</FormGroup>
<Button block className="btn-round" color="default" type="submit">
Continue
</Button>
</form>
</div>
<div className="modal-footer no-border-footer">
<span className="text-muted text-center">
{message ? <Message message={message}/> : null}
</span>
</div>
</Modal>
</>
) 
}



return (
<>
<div className="content">
<Row>
<Col lg="3" md="6" sm="6">
<Card className="card-stats">
<CardBody>
<Row>
<Col md="4" xs="5">
<Recharge />
</Col>
<Col md="8" xs="7">
<div className="numbers">
<p className="card-category">Last Transaction</p>
<CardTitle tag="p">315 Units</CardTitle>
<p />
</div>
</Col>
</Row>
</CardBody>
<CardFooter>
<hr />
<div className="stats">
<i className="fas fa-people-carry " /> Get help

</div>
</CardFooter>
</Card>
</Col>
<Row>
<Col md="12">
<Card className="card-plain">
<CardHeader>
<CardTitle tag="h4">Transactions</CardTitle>
<p className="card-category">
A list of your previous transactions
</p>
</CardHeader>
<CardBody>
<Table responsive>
<thead className="text-primary">
<tr>
<th>Date</th>
<th>Amount</th>
<th>Token</th>
<th className="text-right">Action</th>
</tr>
</thead>
<tbody>


{
transactions.map(transaction  =>{
return  (<tr><TransactionItem key={transaction._id} transaction={transaction} />
</tr>)
})
}


</tbody>
</Table>
</CardBody>
</Card>
</Col>
</Row>

</div>
</>
);
}
export default Dashboard;

Answer 1

我将模态移到另一个页面，并将其导入到仪表板中。现在工作正常。