我正在從服務器獲取資料。我要展示的組件取決于獲取的結果。
const response = fetch(url)
.then((result) => result.json())
.then((data) => data)
.catch((e) => {
console.log(e);
});
return {response.id ? <span>success!</span> : <span>fail</span>};
但這是 TSX，而不是 JSX。問題是我不明白如何讓它與 TypeScript 一起作業。終端告訴我 React 未能使用三元運算子編譯該行。你能幫我解決這個問題嗎？
uj5u.com熱心網友回復：
您應該為回應創建一個狀態，因為您希望組件在獲取資料后重新渲染資料。
const [data, setData] = useState({});
那么如果你想獲取一次資料，最好將它包裹在 useEffect 周圍：
useEffect(() => {
fetch("someUrl")
.then((result) => result.json())
.then((data) => {
if (data) setData(data);
})
.catch((e) => {
console.log(e);
});
}, []);
然后簡單地檢查資料是否為空。一旦獲取，它將更新狀態為獲取的資料，這將重新渲染組件并顯示它。
return <>{(data && data.id) ? <span>success!</span> : <span>fail</span>}</>
uj5u.com熱心網友回復：
嘗試洗掉{}：
return response.id ? <span>success!</span> : <span>fail</span>;
嘗試替換{}為()：
return (response.id ? <span>success!</span> : <span>fail</span>);
嘗試使用 React Fragment：
return <>{response.id ? <span>success!</span> : <span>fail</span>}</>;
你在使用 Promise 時犯了一個錯誤：你不能在 React 中使用原始的 Promise。您應該使用以下方法之一：
使用資料值、加載標志、錯誤創建狀態
import { FC, useEffect, useState } from "react";
export const LoadData1: FC<Props> = ({ fetchData }) => {
const [response, setResponse] = useState<MyResponse>();
const [loading, setLoading] = useState(true);
const [error, setError] = useState<any>();
useEffect(() => {
setLoading(true);
setError(undefined);
setResponse(undefined);
fetchData().then(
(data) => {
setLoading(false);
setResponse(data);
},
(e) => {
setLoading(false);
setError(e);
}
);
}, [fetchData]);
if (loading) {
return <>Loading in progress...</>;
}
if (error || !response) {
return <div>An error has occurred: "{error}"</div>;
} else {
return response.id ? (
<span>
success! Data #{response.id} and '{response.text}' has been fetched.
</span>
) : (
<span>fail</span>
);
}
};
使用現成的 React 鉤子
您可以使用react-use/useAsync。
import { FC } from "react";
import { useAsync } from "react-use";
export const LoadData2: FC<Props> = ({ fetchData }) => {
const { value, loading, error } = useAsync(fetchData, [fetchData]);
if (loading) {
return <>Loading in progress...</>;
}
if (error || !value) {
return <div>An error has occurred: "{error}"</div>;
} else {
return value.id ? (
<span>
success! Data #{value.id} and '{value.text}' has been fetched.
</span>
) : (
<span>fail</span>
);
}
};
Codesandbox就是為了展示這一點而創建的。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/368253.html