我是 React JS 的新手，仍然在努力掌握一些概念。
我正在嘗試對我的代碼進行錯誤處理，并且僅在 Fetch 完成后才顯示 API 回應。
下面我有我的代碼，這就是我所做的。
import React, { useState, useEffect } from "react";
function Transaction({ response }) {
const [transaction, setTransaction] = useState([]);
const token = "2c506c6b-d880-36bb-bdba-a035d1464b35";
const requestOptions = {
method: "GET",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${token}`
},
};
useEffect(() => {
fetch(
"https://api.flash-internal.flash-group.com/ecommerceManagement/1.0.0/api/transaction/5KISDW53",
requestOptions
)
.then((response) => response.json())
.then((data) => setTransaction(data));
}, []);
// console.log(transaction.result.details[0].vouchers[0].result);
return (
<>
<div>
Hello
<b>Transaction Status:</b> {transaction.status} <br />
</div>
</>
);
}
export default Transaction;
下面是我嘗試做一些干凈的錯誤處理的方法。有人可以幫助我，或者至少向我推薦我可以學習如何正確執行此操作的地方。
import React, { useState, useEffect } from "react";
function Transaction({ response }) {
const [transaction, setTransaction] = useState([]);
const token = "2c506c6b-d880-36bb-bdba-a035d1464b35";
const requestOptions = {
method: "GET",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${token}`,
},
};
function handleErrors(response) {
if (!response.ok) {
throw Error(response.statusText);
}
return response;
}
useEffect(() => {
fetch(
"https://api.flash-internal.flash-group.com/ecommerceManagement/1.0.0/api/transaction/5KISDW53",
requestOptions
)
.then(handleErrors)
.then((response) => console.log("ok"))
.catch((error) => console.log(error))
.then((response) => response.json())
.then((data) => setTransaction(data));
}, []);
// console.log(transaction.result.details[0].vouchers[0].result);
return (
<>
<div>
<b>Transaction Status:</b> {transaction.status} <br />
</div>
</>
);
}
export default Transaction;
uj5u.com熱心網友回復：
您可以在反應中使用條件渲染。
return (
{
transaction.length === 0 ? <></> :
<>
<div>
<b>Transaction Status:</b> {transaction.status} <br />
</div>
</>
}
)
您可以使用加載或任何您想要的東西來代替<></>資料存在的任何其他適當條件。
uj5u.com熱心網友回復：
您需要在此處保留多個狀態。
data: 對于來自 API 的資料isLoading: 加載狀態isError：對于錯誤狀態
狀態：
const [transactions, setTransactions] = useState({
data: [],
isLoading: false,
isError: false,
});
在你的 useEffect 中你應該做
useEffect(() => {
setTransactions({ ...transactions, isLoading: true });
fetch(
"https://api.flash-internal.flash-group.com/ecommerceManagement/1.0.0/api/transaction/5KISDW53",
requestOptions
)
.then(handleErrors)
.then((response) => console.log("ok"))
.catch((error) => {
setTransactions({ ...transactions, isError: true });
})
.then((response) => {
setTransactions({
...transactions,
data: response.json(),
isLoading: false,
});
})
.then((data) => setTransaction(data));
}, []);
然后您可以進行條件渲染并在準備就緒時顯示加載欄和資料元素
uj5u.com熱心網友回復：
我看到的一個問題是，您在 Promise 鏈中隱式回傳控制臺日志的 void 結果，因此稍后 thenables 沒有收到解壓縮的 JSON 回應值。
useEffect(() => {
fetch(
"......",
requestOptions
)
.then(handleErrors)
.then((response) => console.log("ok")) // <-- returns undefined!
.catch((error) => console.log(error))
.then((response) => response.json()) // <-- can't call `json()` of undefined!
.then((data) => setTransaction(data));
}, []);
您似乎在詢問獲取處理。我建議在回傳json, 之前檢查 ok 回應。如果您想有條件地等待顯示任何獲取的內容，請使用加載狀態。
例子：
function Transaction({ response }) {
const [loading, setLoading] = useState(true);
const [transaction, setTransaction] = useState();
const requestOptions = {
method: "GET",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${token}`,
},
};
useEffect(() => {
setLoading(true);
fetch(
".....",
requestOptions
)
.then((response) => {
if (!response.ok) {
throw Error(response.statusText);
}
return response.json();
})
.then((data) => {
setTransaction(data)
})
.catch((error) => {
console.log(error)
})
.finally(() => {
setLoading(false);
});
}, []);
if (loading) {
return null; // or loading spinner/etc
}
return (
<>
{transaction
? (
<div>
<b>Transaction Status:</b> {transaction.status} <br />
</div>
)
: <div>No transaction data</div>
}
</>
);
}
如果要顯示任何錯誤，請添加一些錯誤狀態和一些條件渲染邏輯來顯示它，類似于transaction state.
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/486782.html
標籤：javascript 反应