Javascript 如何仅向当前映射值显示加载程序in按钮？

我已经放置了加载程序，如果单击按钮，加载程序将运行，但是它映射为从api获取值，因此如果我单击一个按钮，加载程序将为所有按钮运行，如何仅为相应的元素执行此操作

我的加载器是：

<button id="Addlist" onClick={() => this.onAddProvider(providerList.id)} className="btn info"> {this.state.loading ? (
      <div className="search-loader">
        <Loader
          visible={this.state.loading}
          type="Oval"
          color="#092b50"
          height={50}
          width={50}
        />
      </div>
    ) : "Add to List"}</button>

this.onAddProvider（providerList.id）}className=“btn info”>{this.state.loading(
)：“添加到列表”}

由于按钮映射到“循环加载程序对所有按钮运行”按钮中，如果我单击一个按钮

例如：

---

您正在设置

状态。我想，当单击按钮时，加载

为true。但是在加载器组件中，您使用的是一个

状态。为每个按钮加载
变量，无论单击哪个按钮，每个加载器都会收到
可见
的真实值

解决方案是将提供程序的id存储在
状态。如果提供程序正在加载，则提供程序加载
，如果在加载程序中出现
可见
，则可以在加载程序中放置
状态。提供程序加载===提供程序列表.id
。当提供程序加载完成时，您可以将值设置为false或任何不是提供程序ID的值。
您正在设置
状态。我想，当单击按钮时，加载
为true。但是在加载器组件中，您使用的是一个
状态。为每个按钮加载
变量，无论单击哪个按钮，每个加载器都会收到
可见
的真实值

解决方案是将提供程序的id存储在
状态。如果提供程序正在加载，则提供程序加载
，如果在加载程序中出现
可见
，则可以在加载程序中放置
状态。提供程序加载===提供程序列表.id
。当提供程序加载完成时，您可以将值设置为false或任何不是提供程序ID的值。
我认为您应该将加载状态更改为类似的值

const [loading, setLoading] = useState({providerID1: false, providerID2: false, ...})

您的
加载程序
状态将更改为

<button id="Addlist" onClick={() => this.onAddProvider(providerList.id)} className="btn info"> {this.state.loading[providerList.id] ? (
  <div className="search-loader">
    <Loader
      visible={this.state.loading[providerList.id]}
      type="Oval"
      color="#092b50"
      height={50}
      width={50}
    />
  </div>
) : "Add to List"}</button>

this.onAddProvider（providerList.id）}className=“btn info”>{this.state.loading[providerList.id](
)：“添加到列表”}
我认为您应该将加载状态更改为

const [loading, setLoading] = useState({providerID1: false, providerID2: false, ...})

您的
加载程序
状态将更改为

<button id="Addlist" onClick={() => this.onAddProvider(providerList.id)} className="btn info"> {this.state.loading[providerList.id] ? (
  <div className="search-loader">
    <Loader
      visible={this.state.loading[providerList.id]}
      type="Oval"
      color="#092b50"
      height={50}
      width={50}
    />
  </div>
) : "Add to List"}</button>

this.onAddProvider（providerList.id）}className=“btn info”>{this.state.loading[providerList.id](
)：“添加到列表”}
给你一个解决方案


this.state={
加载：“”
};
onAddProvider=id=>{
this.setState（{loading:id}）；
}
this.onAddProvider（providerList.id）}className=“btn info”>
{
this.state.loading==providerList.id(
)：“添加到列表”
}

给你一个解决方案


this.state={
加载：“”
};
onAddProvider=id=>{
this.setState（{loading:id}）；
}
this.onAddProvider（providerList.id）}className=“btn info”>
{
this.state.loading==providerList.id(
)：“添加到列表”
}