React：从 API 获取数据时在 React 中遵循 DRY答案

【问题标题】：React: following DRY in React when fetching data from APIReact：从 API 获取数据时在 React 中遵循 DRY
【发布时间】：2021-12-16 23:55:57
【问题描述】：

当我从 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 });
};

【问题讨论】：

标签： javascript reactjs dry

【解决方案1】：

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}/>
}

【讨论】：