賞金將在 2 天內到期。此問題的答案有資格獲得 50聲望賞金。 shruti sharma希望引起對這個問題的更多關注。
我正在接收我的API資料react。我將相同的內容發送data到另一個組件到downloadexcel 檔案。
const [data,setData] = useState([]);
const fetchDataForExcel = async()=>{
const {data}= await axios.get( env.resourceServerUrl "/payment/data");
setData(data);
}
我將此資料發送到另一個組件以創建 excel 檔案。
<div><ExportToExcel apiData={data} fileName={fileName} /></div>
實際上，我data包含許多欄位，例如ID, SSN, Name等。我想從中發送選定data的欄位，而不是所有欄位。我應該做些什么改變？
uj5u.com熱心網友回復：
如果您已經知道您想要的物件的屬性名稱，那么您應該可以發送它；
<div><ExportToExcel apiData={data.foo} fileName={fileName} /></div>
或者，您可以發送整個資料物件，然后在內部<ExportToExcel>您可以從道具訪問屬性，例如/
props.apiData.foo。（對我來說，“apiData”這個名字暗示了從 API 回傳的所有資料，而不僅僅是一個屬性。）
uj5u.com熱心網友回復：
只需像這樣使用您需要的欄位創建新的 obj
<ExportToExcel
apiData={{ sheet1: data.sheet1, otherstuff: data.other }}
fileName={fileName}
/>
或更好（如果某些庫未提供 ExportToExcel）
<ExportToExcel
sheet1={data.sheet1}
otherstuff={data.other}
fileName={fileName}
/>
uj5u.com熱心網友回復：
由于您無法在ExportToExcel 組件內部解構資料，因此您有 2 個選項：
如果您只是在整個資料中使用某些欄位，只需在
fetchDataForExcel函式內部對其進行解構，僅將那些傳遞給setData.const fetchDataForExcel = async()=>{ const {data}= await axios.get( env.resourceServerUrl "/payment/data"); const {field1, field2, field3} = data; setData({field1, field2, field3}); }然后直接傳資料
<div><ExportToExcel apiData={data} fileName={fileName} /></div>選擇性地傳遞道具：
<div><ExportToExcel apiData={{field1: data.field1, field2: data.field2}} fileName={fileName} /></div>
讓我知道它是否有幫助:)
uj5u.com熱心網友回復：
解構將是最好的選擇，因為您希望選定的檔案解構您需要的資料，然后作為道具傳遞給子組件。
const [data,setData] = useState([]);
const fetchDataForExcel = async()=>{
const {data}= await axios.get( env.resourceServerUrl "/payment/data");
setData(data);
}
const {requiredField} = data;
<div><ExportToExcel requiredField={requiredField} fileName={fileName} /></div>
uj5u.com熱心網友回復：
查看娛樂
在子組件上設定屬性將導致它被重新創建，當您設定新資料時，這可能會丟失其現有資料。
查看模型
處理此問題的一種方法是使用view model物件內部的props物件。即使在創建視圖時，它也會保留您的資料。有關如何傳入視圖模型的示例，請參閱此視圖創建。
資料組成
事實上，如果你有一個入口點AppViewModel，它就可以創建子視圖模型，并且這種模式可以很容易地以整潔的方式進行擴展。
查看這些課程，了解它們是如何組合在一起的。React 還有其他一些狀態管理解決方案，但我非常喜歡這個。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/467712.html
標籤：javascript 反应 反应式 用户界面 反应钩子
上一篇：JToggle按鈕背景顏色更改