Javascript 将值传递给React map函数中的函数

我有个目标

    const opt = [
  {
    name: "VAS",
    lines: ["."]
  },
  {
    name: "PACK",
    lines: ["1", "2"]
  },
  {
    name: "RET",
    lines: ["A"]
  }
];

我正在尝试创建一个按钮组，其中所有按钮都是基于

opt.name

动态生成的，如下所示：

  <ButtonGroup
      color="primary"
      aria-label="large outlined primary button group"
    >
      {opt.map((elem, index) => (
        <Button onClick={changeState(elem.name)}>{elem.name} </Button>
      ))}
    </ButtonGroup>

})

出于某些原因，这会导致无限重渲染循环：

期望的结果是setValue根据我单击的按钮（opt.name）更新状态

---

谢谢

您正在立即调用

changeState

。例如：

<Button onClick={changeState(elem.name)}>{elem.name} </Button>

{elem.name}

这和

const clickHandler = changeState(elem.name);
// ...
return (
  <Button onClick={clickHandler}>{elem.name} </Button>
);

const clickHandler=changeState（元素名称）；
// ...
返回(
{elem.name}
);

改为：

  {opt.map((elem, index) => (
    <Button onClick={() => changeState(elem.name)}>{elem.name} </Button>
  ))}

{opt.map（（元素，索引）=>(
changeState（elem.name）}>{elem.name}
))}

它可以工作，但我不知道为什么。changeState不应该只在点击按钮时调用吗？@PeterSlanina您是说希望处理程序成为

changeState（…）

的返回值，这可能不是您想要的。

  {opt.map((elem, index) => (
    <Button onClick={() => changeState(elem.name)}>{elem.name} </Button>
  ))}