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

Question

我有一个对象

    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) 更新状态。

谢谢

标签： javascriptreactjsuse-statebuttongroup

Answer 1

您正在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>
  ))}