Javascript setState正在更新数组中所有元素的css属性

我正在映射一个数组，并为数组的每个元素创建

元素。还有一个

)
}
返回列表元素
}
render（）{
返回(

{this.generateList（this.state.data）}//呈现10个li元素

)
}
...
这是因为对于每个img，您都在这样做：


style={{display:this.state.isDownloading？'inline block'：'none'}

您正在为每个图像引用相同的状态。如果this.state.isDownloading每个图像的样式将为：
{'inline block}
，因为this.state.isDownloading为true

现在显示每个元素的加载程序的一种方法是更新您的状态，这样您就可以知道是否正在下载（isDownloading）以及它所指的img。因此，您必须跟踪两件事：


正在下载吗
哪一个正在下载

您可以通过更新“onClick”函数来实现这一点，例如，我们可以将“key”道具作为参数传递，以便我们知道正在下载哪个li：


this.setState（{isDownloading:true，keyitembeingdownload:key}）/>

现在，您可以将样式的条件更新为：

this.state.isDownloading&&key==this.state.keyitembeingdownload

因此，现在，如果是下载&&如果正在下载的项目密钥对应于循环中的项目密钥，则显示加载程序。
这是因为对于每个img，您都在这样做：


style={{display:this.state.isDownloading？'inline block'：'none'}

您正在为每个图像引用相同的状态。如果this.state.isDownloading每个图像的样式将为：
{'inline block'}
，因为this.state.isDownloading为true

现在，每个元素显示加载程序的一种方法是更新您的状态，以便您知道是否正在下载（isDownloading）以及它所指的img。因此，您必须跟踪两件事：


正在下载吗
哪一个正在下载

您可以通过更新“onClick”函数来实现这一点，例如，我们可以将“key”道具作为参数传递，以便我们知道正在下载哪个li：


this.setState（{isDownloading:true，keyitembeingdownload:key}）/>

现在，您可以将样式的条件更新为：

this.state.isDownloading&&key==this.state.keyitembeingdownload

因此，现在，ifisDownloading&if正在下载的项目密钥对应于循环中的项目密钥，然后显示加载程序。
如何链接图像标签和图像数据如何链接图像标签和图像数据
...
constructor() {
  super()
  this.state = {data: null, isDownloading: null}
}

componentDidMount() {
  ...
  //array of data from api call
  this.setState({data: dataArray})
}

generateList = (data) => {
  const listElement = data.map((info, i) => {
    return (
      <li onClick={() => this.setState({isDownloading: true})} key={i}>Download<img style={{display: this.state.isDownloading ? 'inline-block' : 'none'}} src='loader.png' /></li>
    )
  }
  return listElement
}

render() {
  return (
    <div>
      <ul>
        {this.generateList(this.state.data)} //renders 10 li elements
      </ul>
    </div>
  )
}
...