如何在单击事件上设置状态，仅在循环中设置一次？答案

【问题标题】：How to setState on click event, only once within a loop?如何在单击事件上设置状态，仅在循环中设置一次？
【发布时间】：2019-10-05 05:12:24
【问题描述】：

我有一个循环遍历标签列表的函数。我有一个 onClick 事件，我正在调用一个函数。该函数将clicked 的状态设置为循环中被点击项目的id。该函数还有console.log的状态。

它正在记录clicked 的状态 8 次。我的循环中当前有 4 个项目。

我怎样才能使每次用户单击列表中的项目时都可以将状态设置为clicked？

这是我的循环：

 {
  filteredArray.map(link => {
   return (
    <div
     key={link.id}
     role="button"
     style={{paddingBottom: 20}}
     onClick={this.changeView(link.id)}
     onKeyPress={this.changeView(link.id)}
     tabIndex={0}
    >
    <Paragraph size="large">
    <a className='heading__dropdown__link' 
     {link.label}
    </a>
    </Paragraph>
   </div>
  )
 })
}

这是我的函数changeView：

  changeView(id) {
    const { clicked } = this.state
    console.log(clicked)

    return (
      () => this.setState({clicked: id})
    )
  }

【问题讨论】：

您不会在单击按钮时记录，而是在组件呈现时记录。如果它记录了 8 次，则意味着您的组件重新渲染了一次（并且 changeView 被调用了 8 次）。也就是说，我不明白问题是什么（除了日志记录没有用）
它记录了 8 次，因为您为每个项目调用该函数 2 次 onClick={this.changeView(link.id)} onKeyPress={this.changeView(link.id)}, 4 个项目 * 2 = 8
谢谢，我该如何让它在组件呈现时记录下来？我只是希望能够在每次单击项目时设置状态并记录它，从而将状态设置为单击项目的 id。 @oliv
changeView 正在返回一个函数，因此只有在您单击或按键时才会更新状态
如果您只想在单击某个项目时console.log，则需要将changeView更新为changeView(id) { return () => this.setState(state => {console.log(state.clicked); return {clicked: id};}); }

标签： javascript html reactjs onclick frontend

【解决方案1】：

像这样去掉onPress并在onClick中添加箭头功能

onClick={()=>this.changeView(link.id)}

希望这会有所帮助

【讨论】：

【解决方案2】：

你为每个元素调用函数，设置你的函数如下：

changeView = id => ev => this.setState({clicked: id});

【讨论】：