在 react 中呈现按钮列表的意外行为

Question

我正在尝试使用此方法生成按钮列表。我将其重写为测试实例，行为是相同的 - 当您渲染按钮时，onClick 中的函数将被调用，并且无法通过单击生成的按钮再次调用。在本例中，将记录 1 到 5。

function App() {
const [buttonList, setButtonList] = useState();
const experimental = async (e) => {
const array = [1,2,3,4,5];
const listItems = array.map((item) =>
<li key={item}>
<button onClick={console.log(item)}>This is a test</button>
</li>
);
setButtonList(listItems);
}
return (
<div className="App">
<header className="App-header">
<button onClick={experimental}>Click to render</button>
<ul>{buttonList}</ul>
</header>
</div>
);
}

谁能向我解释这种行为和/或提供一种不这样做的方法？

Answer 1

由于上下文的原因。它必须是 (( => {}。让我们使用函数并使用回调钩子来代替。