我在我的 React 應用程式中創建了這個自定義鉤子。它應該回傳一個boolean.
const useFetchResponse = (url: string) => {
const [isValid, setIsValid] = useState<boolean>(false);
useEffect(() => {
const fetchResponse = async () => {
const response = await fetch(url);
console.log(response);
const obj = await response.json();
if (response.ok) {
console.log(await response.json());
setIsValid(true);
}
return response;
};
fetchResponse().then((res) => res);
}, []);
return isValid;
};
export default useFetchResponse;
當我登錄const obj = await response.json();它回傳：{"keyName":"some=key"}.
如何創建一個條件來檢查是否response.json()有一個名為 的鍵keyName？
是這樣的console.log('keyName' in obj) // true嗎？你看到更多我可以改進和重構的東西嗎？
uj5u.com熱心網友回復：
假設您得到如下回應
let response = {
a:'data1',
b:'data2',
c:'data3'
};
然后您可以從物件中提取鍵，如下所示：
let keyOnly = Object.keys(response)); // output will be ["a","b","c"]
那么您可以檢查您的要求值是否包含在上述陣列中，如下所示：假設您是否要檢查是否"b"包含
let checkKey = keyOnly.includes(b)
uj5u.com熱心網友回復：
如果你想檢查一個物件是否具有某種屬性，in運算子就可以了。
const obj = { a: 1 };
'a' in obj // return true
'b' in obj // return false
關于改進
- 最好保存所有獲取狀態，不僅有效或無效。你應該用try/catch塊包裝請求。例如：
const [fetchState, setFetchState] = useState('pending');
useEffect(() => {
const fetchResponse = async () => {
try {
setFetchState('loading');
const response = await fetch(url);
console.log(response);
const obj = await response.json();
if (response.ok) {
console.log(await response.json());
setFetchState('success');
}
return response;
} catch (error) {
setFetchState('failed')
}
};
fetchResponse().then((res) => res);
}, []);
return fetchState;
};
fetchResponse();就足夠了。fetchResponse().then((res) => res);是不必要的。- [可選] 您可以使用庫來發出請求，例如axios。那會更方便。
uj5u.com熱心網友回復：
in比下面的方式慢。
const isValid = obj[`keyname`] !== undefined
在此處查看更多詳細資訊
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/527799.html
標籤：反应json回复