Javascript onClick循环每次单击仅发生一次

我有一个

标签

，它有

onClick

回调：

<label className="cursor-pointer" onClick={loadExisting}>
  Click me
</label>

在这个函数中，我试图只存储那些事件，它们的

title

s是唯一的：

const parseEvents = data => {
    if (data) {
      for (let i = 0; i < data.length; i++) {
        if (titlesArray.indexOf(data[i].title) < 0) {
          setTitlesArray([...titlesArray, data[i].title]);
          setEvents([...events, data[i]]);
        }
      }
    }
  };

const parseEvents=data=>{
如果（数据）{
for（设i=0；i

基本上，我的想法是将所有唯一的标题设置为

标题数组

，如果事件的

标题

是唯一的，我将其添加到

标题数组

和

事件

问题：仅当我持续单击该

标签

时，此功能才有效。第一次单击

事件。长度
等于0，第二次单击-等于1，第三次单击-等于2，等等。为什么它不一次分析所有事件？因此，单击一次后，我将有约10个具有唯一标题的事件。
setState
is和
settitlesray
和
setEvents
可能会调用
setState

因此，在您的情况下，由于您不更新
标题数组
和
事件
，最有可能的情况是您将只观察添加的最后一个元素
（
数据[data.length-1]
）

解决方法是只需调用一次
setState

data.forEach(d => {
  if (titlesArray.includes(d.title) {
    titlesArray.push(d.title)
    events.push(d)
  }
})
//I slice 0 to copy, but maybe it is not necessary if your function does it already
setTitlesArray(titlesArray.slice(0))
setEvents(events.slice(0))



注意：在数组（titlesArray）中查找是否存在比使用集合效率低。你应该考虑如果你有很多标题
你需要详细阐述这个问题。“这只有在我一直点击
标签时才有效”：因为事件只在点击
onClick
时被触发。@AkshitMehra，是的，但我希望它能解析所有的事件，它是从API得到的，而不是一个。当页面加载时，
events
为空，若我单击标签，我将从API返回19个事件。但是，如果我在渲染之前，在单击标签之后，
console.log（events）
，则事件中只有一个对象。如果我再次单击它-
事件
中有两个对象。我希望，在点击标签后：1）对API的请求检索19个事件2）所有事件都被解析3）我有~10个事件在
events
state.fetch（url）中有唯一的标题。然后（res=>res.json（））。然后（data=>parseEvents（data））你应该试试。你能发布
loadExisting（）的代码吗
您正在调用的函数？@AkshitMehra，使用
loadExisting（）
函数更新了原始帖子
data.forEach(d => {
  if (titlesArray.includes(d.title) {
    titlesArray.push(d.title)
    events.push(d)
  }
})
//I slice 0 to copy, but maybe it is not necessary if your function does it already
setTitlesArray(titlesArray.slice(0))
setEvents(events.slice(0))