javascript - React:从 API 获取数据时在 React 中遵循 DRY
问题描述
当我从 API 获取数据时,如果我得到 Ok,我将渲染组件以显示数据,如果发生错误,我想为不同的组件显示自定义消息,并且在获取数据期间我想显示加载消息。
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 });
};
解决方案
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}/>
}
推荐阅读
- api - 如何获取 Instagram 用户的个人资料图片网址?
- javascript - Vue如果满足条件但不显示结果
- angular - 将两次 API 调用转换为一次,并在两个组件中使用其数据
- r - 在没有渲染功能的 R Shiny 中显示 Plotly Plot
- sql - 雪花我们如何遍历临时表的每一行并将其值插入到另一个表中,其中每个字段的值都是单行?
- unit-testing - Azure Pipeline:如何保存 Visual Studio“测试结果”以用于管道中的其他任务?
- python - 从嵌套的 json url 获取字段
- javascript - 在角度选择下拉列表中获取名称和 ID 作为值
- python - 通过使用 Python 读取数字 txt 文件进行快速排序
- reactjs - 反应js中未定义handleChange