将值传递给 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 ) 更新状态。

谢谢

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>
  ))}

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

Passing a value to a function within React map function

javascript

reactjs

use-state

buttongroup