Question

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

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

https://developer.chrome.com/extensions/downloads#method-search http://192.168.22.124:3000/source/5102018114022AM-pexels-photo.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=。

循环数组以列出项目

1 个答案: