React循环渲染带onClick元素时的无限调用及点击异常问题

1. 先修正无效的JSON格式 #

你提供的response.json是无效格式，对象需要键值对，你要的是字符串数组，应该改成：

["a", "b", "c", "d"]

2. 核心问题：onClick绑定错误导致无限循环 #

不管是fetchData(x)还是executeThisFunction()，直接写函数调用会导致组件渲染时立即执行函数，而非点击时触发。如果函数内部有Redux dispatch更新store，store变化会触发组件重新渲染，重新渲染又会执行函数，形成死循环，最终栈溢出。

另外用var遍历数组会存在闭包问题，循环里的x会共享同一个引用，导致点击时拿到的都是最后一个值。

3. 修正后的代码示例 #

// 假设json是修正后的数组：["a", "b", "c", "d"]
const textElement = json.map((item) => (
  <h3 key={item} onClick={() => displayAlert(item)}>{item}</h3>
));

return (
  <>
    {/* 直接传函数引用，不要加括号调用 */}
    <h3 onClick={executeThisFunction}>some other text</h3>
    {textElement}
  </>
);

4. 补充说明 #

• 如果executeThisFunction需要传参，同样用箭头函数包裹：onClick={() => executeThisFunction(参数)}
• 用map遍历数组时必须加key属性，这是React的要求，避免渲染警告
• 若不想用箭头函数，也可以用函数柯里化提前绑定参数：

  // 先定义柯里化的函数
  const handleClick = (item) => () => {
    displayAlert(item);
  };
  
  // 然后绑定
  <h3 key={item} onClick={handleClick(item)}>{item}</h3>
  

关于箭头函数需点击两次的原因 #

你之前用var x的循环，var的作用域是函数级，循环结束后所有箭头函数里的x都指向同一个变量（最后一个值）。第一次点击时dispatch更新store，组件重新渲染，此时循环重新执行，x的值才被正确捕获。改用map+const item就能解决这个问题，因为map的每一次迭代都有独立作用域，item是当前迭代的独立值。

内容的提问来源于stack exchange，提问作者devabhishekpal