javascript - react 多重加载状态

Question

我尝试在从 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>
)}

Answer 1

您可以将数据与数组一起使用，并调用 .map() 来显示值。您可以将这些项目存储在 useState() 中函数组件或类组件中的 this.state 的钩子(Hook)。

如果您有函数组件，请尝试以下操作:

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

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

在类组件中，您需要像这样存储在 this.state 中:

constructor(props) {
    super(props);

    this.state = {
        values: [sales_numbers, account_numbers, users_numbers]
    }
}

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

希望这会有所帮助!