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

如何解决将值传递给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>

函数本身设置反应状态：

  const changeState = (x) => {
setValue(x);

};

由于某种原因，这将导致无限的重新渲染循环：

https://codesandbox.io/s/reverent-neumann-0t7qq?file=/src/App.js:292-391

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

谢谢

解决方法

您正在立即调用changeState。例如：

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

和

是一样的东西

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

更改为：

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