當我從 API 獲取資料時，如果我得到確定，我將渲染組件以顯示資料，如果發生錯誤，我想為不同的組件顯示自定義訊息，并且在獲取資料期間我想顯示一個加載訊息。
export default function App() {
const { data: products, loading, error } = useFetch(
"products?category=shoes"
);
if (error) return <div>Failed to load</div>;
if (loading) return <div>wait is Loading</div>;
return (
<>
<div className="content">
<section id="products">{products.map((product) =>{return <div>product.name</div>})}</section>
</div>
</>
);
}
我計劃在多個組件中進行 fetch 呼叫。所以，我在想，如果我可以在一個地方撰寫上述邏輯，比如 HOC 或 Rendered Props 并重用它。
我嘗試過的：但失敗的 HOC 將無法作業，因為您無法在正常功能中呼叫鉤子。它必須是一個組件。渲染的道具將無法作業，因為它會出現以下錯誤： 錯誤：比上一次渲染期間渲染了更多的鉤子。
下面是我失敗的渲染道具代碼
const ShowData= function ({ data: products }) {
return (
<div>
{products.map(product => {return <div>product.name</div>})}
</div>
);
};
function SearchCount({ count }) {
return <h3>Search Results: {count} items found</h3>;
}
const Wrapper = function () {
return (
<LoadingAndError
render={ShowData}
params={{ url: "products?category=shoes" }}
></LoadingAndError>
);
};
export default Wrapper;
加載和錯誤邏輯移至 LoadingAndError 組件
const LoadingAndError = function (props) {
const { url } = props.params;
const { data: products, loading,error} = useFetch(url);
if (loading)
return <h1>Loading</h1>;
if (error) return <h1>Error</h1>;
return props.render({ data: products });
};
uj5u.com熱心網友回復：
return props.render({ data: products });
此行props.render作為函式呼叫，但您傳入了一個組件。直接呼叫組件可能會導致您看到的錯誤。如果你想像props.render這樣使用，那么你應該傳入一個創建元素的函式，如下所示：
<LoadingAndError
render={(props) => <ShowData {...props} />}
params={{ url: "products?category=shoes" }}
></LoadingAndError>
或者，如果您想繼續傳入render={ShowData}，則更改 loadingAndError 以創建一個元素：
const loadingAndError = function (props) {
const { url } = props.params;
const { data: products, loading,error} = useFetch(url);
if (loading)
return <h1>Loading</h1>;
if (error) return <h1>Error</h1>;
const Component = props.render
return <Component data={products}/>
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/345108.html
標籤：javascript 反应 干燥