循环数组以列出项目

Question

在我的前端 Reactjs 应用程序中，我同时上传多张图片并将网址保存在一个数组中。当尝试循环包含要在网站上显示的 url 的数组时，它将每个图像显示在一个单独的框中（这很好）。但是，当我单击单个图像时，它会根据控制台日志呈现数组中的所有图像 url。

当我单击单个图像时，它会显示在控制台日志中：

http://192.168.22.124:3000/source/5102018114022AM-pexels-photo.jpg http://192.168.22.124:3000/source/5102018114022AM-redhat.jpg

handleClick() {
    this.setState({ isToggleOn: !this.state.isToggleOn})
}

render() {
const { name, fileExt, pic } = this.state;
var img = [];
for (var i = 0; i < pic.length; i++) {
  console.log(pic[i]);
    img.push(<a style={{width: 200, height: 250}} key={i} className={'tc ' + change + ' dib br3 ma2 pa2 grow bw2 shadow-5'} onClick={this.handleClick}>
      <div key={i}>
      <img style={{width: 175, height: 175}} className='tc br3' alt='robots' key={i} src={`${pic[i]}`}/>
      </div>
      </a>)
};

  return (
    isToggleOn && fileExt !== 'mp4' ?
    <div>
    { img }
    </div>

Answer 1

现在你在你的渲染函数的循环中console.loging。因此，每当重新渲染内容时，它都会循环并多次访问 console.log。因为您的handleClick 方法正在调用setState，所以组件将被重新渲染，它再次调用render() 函数，然后在循环中调用console.log。

听起来你想要的只是 console.log 你点击的项目。如果是这种情况，那么您可以将 console.log 放在 handleClick 方法中，然后将参数传递给：

onClick={() => this.handleClick(p)}

还有一个更好的方法是使用.map，如下所示：

handleClick(url) {
  console.log(url);
  this.setState({ isToggleOn: !this.state.isToggleOn});
}

render() {
  const { name, pic } = this.state;
  return (
    <div>
      {pic.map((p, i) => (
        <a style={{width: 200, height: 250}} key={p} className={'tc ' + change + ' dib br3 ma2 pa2 grow bw2 shadow-5'} onClick={() => this.handleClick(p)}>
          <div>
            <img style={{width: 175, height: 175}} className='tc br3' alt='robots' src={p}/>
            <h2 style={{position: "absolute", top: 185, bottom: 0, right: 0, left: 0}} className='f6 measure-narrow lh-copy'>{name[i]}</h2>
          </div>
        </a>
      ))}
    </div>
  );
}

另请注意：您只需要在循环内的外部元素上使用key=。