reactjs - 添加到状态数组的按钮仅在添加到该状态本身时打印状态数组

Question

我单击“添加按钮”按钮将 Btn 组件添加到状态数组，并将它们全部映射到页面。如图所示，在我添加了大约 6 个之后，我单击其中任何一个，它们会打印出在将特定按钮添加到状态数组之前的状态。

例如，如果我创建 6 个 Btn，然后单击第 3 个 Btn，它会打印带有 2 个 Btn 而不是 6 个的状态数组。

const Btn= (props) => {
  return (
    <button type="button" onClick={props.removeButton}>DELETE</button>
  )

}

const App = () => {
  const [buttonArray,changeButtonArray]=useState([]);

  function addButton(){
    changeButtonArray([...buttonArray,<Btn removeButton={removeButton}/>])
  }

  function removeButton(){
    console.log(buttonArray)
  }

  let buttonList = buttonArray.map((item,index)=><div key={index}>{item}</div>)

  return (
    <>
      <div>
        {buttonList}
      </div>
      <button type="button" onClick={addButton}>ADD BUTTON</button>
    </>
  );
}

代码和结果

标签： reactjsstate