Javascript 反应多重加载状态

我试图在从API获取数据时为每张卡添加一个加载图标。有没有别的办法保持干燥。。。为了避免重复我自己

{isLoading ? (<Loader />) : (
    <div className="module card">{sales_numbers}</div>
)}

{isLoading ? (<Loader />) : (
    <div className="module card">{accounts_numbers}</div>
)}

{isLoading ? (<Loader />) : (
    <div className="module card">{users_numbers}</div>
)}

{isLoading？（）：(
{销售编号}
)}
{正在加载？（）：(
{帐户_编号}
)}
{正在加载？（）：(
{用户数}
)}

尝试构建一个组件，该组件可以自行管理加载状态。 这样你就可以有

export default ({data}) => (
   data ? <div className="module card">{data}</div> : <Loader />
)

导出默认值（{data}）=>(
数据？{data}：
)

---

您唯一关心的是为每个实体传递数据属性。

尝试构建一个自己管理加载状态的组件。 这样你就可以有

export default ({data}) => (
   data ? <div className="module card">{data}</div> : <Loader />
)

导出默认值（{data}）=>(
数据？{data}：
)

---

您唯一关心的是为每个实体传递数据属性。

您可以将数据与数组一起使用，并调用

.map（）

来显示值。您可以将这些项存储在函数组件的钩子中或类组件的

this.state

如果您有功能组件，请尝试以下操作：

const [values] = useState([sales_numbers, account_numbers, users_numbers]);

return <>
    {
        values.map(e => isLoading ?
                        <Loader /> :
                        <div className="module card">{e}</div>
        )
    }
</>

---

我希望这有帮助

您可以将数据与数组一起使用，并调用

.map（）

来显示值。您可以将这些项存储在函数组件的钩子中或类组件的

this.state

如果您有功能组件，请尝试以下操作：

const [values] = useState([sales_numbers, account_numbers, users_numbers]);

return <>
    {
        values.map(e => isLoading ?
                        <Loader /> :
                        <div className="module card">{e}</div>
        )
    }
</>

我希望这有帮助