Javascript 循环数组以列出项目

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

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

handleClick（）{
this.setState（{istogleon:！this.state.istogleon}）
}
render（）{
const{name，fileExt，pic}=this.state；
var-img=[]；
对于（变量i=0；i

现在您正在

console.log

在渲染函数的循环中运行。因此，每当重新渲染内容时，它都会多次循环和console.log。因为您的

handleClick

方法正在调用

setState

，组件将重新渲染，这将调用

render（）

再次运行，然后在循环中记录控制台

这听起来像是你想要的只是控制台。记录你点击的项目。如果是这样的话，你可以将你的

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>
  );
}

handleClick（url）{
console.log（url）；
this.setState（{istogleon:！this.state.istogleon}）；
}
render（）{
const{name，pic}=this.state；
返回(
{pic.map（（p，i）=>(
this.handleClick（p）}>
{name[i]}
))}
);
}

---

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

key=

。

您可以显示handleClick函数吗？现在控制台日志也显示了以下内容：Proxy{dispatchConfig:{…}，_targetist:FiberNode，isDefaultPrevented:ƒ，isPropagationStopped:ƒ，_dispatchListeners:ƒ，…}@TedKhi检查以确保

onClick

使用箭头函数传递参数：

onClick={（）=>this.handleClick（p）}

我正在使用箭头函数，并且仍然收到代理消息。我已更新了我的问题。this.handleClick（）我还有一个问题。如果我有另一个名为“name”的数组，其中包含每个文件的名称。我如何在pic映射循环中为它循环，以便每个文件都显示其名称…{name}………

list=[{url:'www.1.com'，name:'alex'}，{url:'www.2.com'，name:'tim'}]；

然后您可以执行类似于

list.map（（item）=>console.log（item.url，item.name））；

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>
  );
}