我对我试图执行的代码感到困惑.我使用受控输入,并将来自API的响应传递给子组件,但它呈现最后一个值.
这是我的代码.
P传递我当前try 显示的数据行的ID:
<AdminInvociceDetail row={invoiceRowClicked} />
接收id的组件
import React, { useState, useEffect } from "react";
import {
useFetchInvoiceQuery,
useUpdateInvoiceMutation,
} from "../../features/Invoices/InvoiceSlice";
import { useNavigate, Link } from "react-router-dom";
import "./Admin.css";
const AdminInvociceDetail = ({ row }) => {
const { data } = useFetchInvoiceQuery(row);
const [UpdateInvoice] = useUpdateInvoiceMutation();
//* state for the form
const [Id, setId] = useState("");
const [billtoname, setBillToName] = useState("");
const [clientname, setClientName] = useState("");
const [offc, setOffc] = useState("");
const [matterNo, setMatterNo] = useState("");
useEffect(() => {
setId(data?.ID);
setBillToName(data?.BillToName);
setOffc(data?.OFFC);
setClientName(data?.ClientName);
setMatterNo(data?.MatterNo);
}, [row]);
function ButtonLink({ to, children, className }) {
return (
<Link to={to}>
<button className={className}>{children}</button>
</Link>
);
}
return (
<div>
<div class="box">
<form class="ui form" onSubmit={handleSubmit}>
<h4 class="ui dividing header labels">Invoice Detail:</h4>
<div class="two fields">
<div class="field">
<label className="labels">Bill To Name</label>
<input
type="text"
name="BillToName"
placeholder="Bill To Name"
required
onChange={(e) => setBillToName(e.target.value)}
value={billtoname || ""}
/>
</div>
<div class="field">
<label className="labels">Client Location</label>
<select
class="ui fluid dropdown"
required
onChange={(e) => setClientName(e.target.value)}
value={clientname || ""}
>
<option value="">Location</option>
<option value="Becker - Tampa">Becker - Tampa</option>
<option value="Becker - Orlando">Becker - Orlando</option>
<option value="Becker - West Palm Beach">
Becker - West Palm Beach
</option>
<option value="Becker - Fort Myers">Becker - Fort Myers</option>
<option value="Becker - Coral Gables">
Becker - Coral Gables
</option>
<option value="Becker - Fort Lauderdale">
Becker - Fort Lauderdale
</option>
<option value="Becker - Morristown">Becker - Morristown</option>
<option value="Becker - Bradenton">Becker - Bradenton</option>
<option value="Becker - Stuart">Becker - Stuart</option>
<option value="Becker - Naples">Becker - Naples</option>
<option value="Becker - Sarasota">Becker - Sarasota</option>
<option value="Becker - Fort Walton Beach">
Becker - Fort Walton Beach
</option>
<option value="Becker - New York">Becker - New York</option>
<option value="Becker - Mount Laurel">
Becker - Mount Laurel
</option>
<option value="Becker - Red Bank">Becker - Red Bank</option>
<option value="Becker - Tallahassee">
Becker - Tallahassee
</option>
</select>
</div>
</div>
<div class="two fields">
<div class="field">
<label className="labels">Office</label>
<select
class="ui fluid dropdown"
required
onChange={(e) => setOffc(e.target.value)}
name="offc"
value={offc || ""}
>
<option value="">Office</option>
<option value="TAL">TAL</option>
<option value="ORL">ORL</option>
<option value="WPB">WPB</option>
<option value="FTM">FTM</option>
<option value="MIA">MIA</option>
<option value="FTL">FTL</option>
<option value="MOR">MOR</option>
<option value="STR">STR</option>
<option value="NAP">NAP</option>
<option value="BDT">BDT</option>
<option value="SAR">SAR</option>
<option value="FTW">FTW</option>
<option value="TAM">TAM</option>
<option value="MTL">MTL</option>
<option value="MOR">MOR</option>
<option value="RB">RB</option>
<option value="NY">NY</option>
<option value="DC">DC</option>
</select>
</div>
<div class="field">
<label className="labels">Matter No</label>
<input
type="text"
name="MatterNo"
placeholder="Matter No"
onChange={(e) => setMatterNo(e.target.value)}
value={matterNo || ""}
/>
</div>
</div>
<ButtonLink to="/" className="back-button">
Back to Invoice
</ButtonLink>
<button class="submit-button">Submit Invoice</button>
<div class="fields"></div>
</form>
</div>
</div>
);
当我单击行时,该州处于落后状态.不知道我错过了什么.