Question

我不知道如何解决它。我有这个json [{'key': 'data', 'id': '3213'}, {'key': 'data', 'id': '7684'}]，需要将'id'转移到onClick。我在帮助下慷慨地提出了一个周期：

this.array_container = []
for (var key in json) {
   array_container.push(
      <div onClick={() => this.func(json[key]['id'])}><p>json[key]['key']</p></div>
   )
}

并渲染

render() {
   return (this.array_container)
}

问题在于第二个“ id”更改了onClick中第一个容器中的“ id”。两个容器在onClick中具有相同的ID。什么错杰森有不同的ID，这是肯定的

Answer 1

您应该尝试map

this.array_container = [];
json.map((obj) => {
   this.array_container.push(
      <div onClick={() => this.func(obj.id)}><p>{obj.key}</p></div>
   )
});

Answer 2

您需要在arrow函数内部传递参数。这将解决问题：

{/* -----------vv--------denote--vvvvvvvvvvvvv--- */ }
<div onClick={(id) => this.func(json[key]['id'])} key={key}>
   <p>json[key]['key']</p> {/* ---also don't forget ^ key */}
</div>

这将解决两个问题：

在不传递参数的情况下，该函数将在每个循环中采用相同的值。传递参数将解决使用相关密钥的问题。
传递键属性将避免在控制台中显示警告。每当渲染元素数组时，都应始终传递关键道具。

处理事件的更好方法是像这样使用：

onClick={(e, id) => this.func(e, json[key]['id'])}

您现在甚至可以收听事件对象。

或者，不使用箭头功能：

onClick={this.func(e, json[key]['id'])}

您现在可以在组件类中编写一个公共类方法：

func = id => e => {
  //...
}

循环处理时，onClick中的重复ID

2 个答案: