如何在 react 中从列表中渲染的已删除行上运行加载器图标?

Question

嗨，我正在渲染来自 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.isDeleteing在redux状态下设置为true，当我调用removePhoto操作时，this.props.isDelete在redux状态下设置为false，当我在更新时调用renderPhoto操作时

Answer 1

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

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

Answer 2

感谢@Bill。因此，而不是在 redux 存储中设置 true 或 false。我试着有一个对象。所以我使用了在我的操作中传递的令牌- 删除照片

当我调用删除照片操作时

this.props.isDeleting: {
...state.data,
key: action.payload, //key: token
status: true
}

当我调用渲染照片操作时

this.props.isDeleting: {
...state.data,
key: null,
status: false
}

所以组件的代码是这样的：

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) => {
const fileUrl = `url/${token}?subscription-key="something"`
return (
<div className="list-wrapper" key={index}>
<div className="img-block">
<img className="img-block-bucket" src={fileUrl} onError={() => this.updateCRM(token)}/>
/* This is the part of loader - start */ 
{
this.props.isDeleting.key === token ? 
<SvgIcon
svg={"icons/loading-spinner.svg"}
key={index}
fromUrl={true}
className={"delete-loader"}
/> : 
<label className="img-block-file-name">
{this.getFileName(fileUrl)}
</label>
}
/* This is the part of loader - end */ 
</div>
<button disabled={this.props.isDeleting.status} className="del-block" onClick={() => removePhoto(token)}>
<SvgIcon
svg={"icons/ic_trash_bin_48_black.svg"}
key={index}
fromUrl={true}
className={!this.props.isDeleting.status ? "del-block--enabled" : "del-block--disabled"}
/>
</button>
</div>
)});
}