循环数组以列出项目

Question

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

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

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.log。因此，每当内容被重新命名时，它就会反复遍历和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=。