时间戳

首页 > 解决方案 > 如何在反应中从列表呈现的已删除行上运行加载程序图标？

javascript - 如何在反应中从列表呈现的已删除行上运行加载程序图标？

问题描述

嗨，我正在渲染来自 api 响应的照片列表。当我删除其中一个时，只有该行应该显示加载程序。但截至目前，我在所有行上都看到了加载器图标

let boilerImages;
    if( listOfPhotos.data!== undefined && listOfPhotos.data.task && listOfPhotos.data.task.metadata !==''){
    boilerImages =   
      listOfPhotos.data &&
      JSON.parse(listOfPhotos.data.task.metadata).files.map((token, index) => {
        console.log('key', index)
        const fileUrl = `url/${token}?subscription-key="something"`
        return (
        <div className="list-wrapper" key={token+index}>
          <div className="img-block">
            <img className="img-block-bucket" src={fileUrl}/>


            /* This is the part of loader - start */                
              {
                this.props.isDeleting ? 
                <SvgIcon
                  svg={"icons/loading-spinner.svg"}
                  key={index}
                 fromUrl={true}
                 className={"deleting-svg"}
                />: 
               <label className="img-block-file-name"> 
                 {this.getFileName(fileUrl)}
               </label>
             }
           /* This is the part of loader - end */ 

          </div>
          <button disabled={this.props.isDeleting} className="del-block" onClick={() => removePhoto(token)}>
            <SvgIcon
              svg={"icons/ic_trash_bin_48_black.svg"}
              key={index}
              fromUrl={true}
              className={!this.props.isDeleting ? "del-block-svg" : "del-block--disabled"}
            />
          </button>
        </div>
      )});
  }

this.props.isDeleting 在 redux 状态下设置为 true，当我调用 removePhoto 操作并且 this.props.isDeleting 在 redux 状态下设置为 false，当我在更新时调用 renderPhoto 操作

标签： javascriptarraysreactjs

解决方案

它不是isDeleting一个布尔值，而是一个布尔值数组，其中每个条目都是列表项的加载状态，然后你只需要做类似的事情

 {(this.props.isDeleting[index] && ) && (
  <SvgIcon
    svg={"icons/loading-spinner.svg"}
    key={index}
    fromUrl={true}
    className={"deleting-svg"}
  />)}

推荐阅读