onClick()，我要添加表格行

Question

我想在每次点击时添加一行，但我的代码正在替换同一行。

还尝试将 if 保留在 addTable 函数之外，但这对我不起作用。

我尝试了很多解决方案，但都失败了。有人可以帮我吗？

我在下面添加了我的代码，请检查并告诉我。

import { useState } from "react";
import "./App.css";
const App = (props) => {
  const [count, setCount] = useState(0);
  var [items, setItems] = useState([]);
  function addTable() {
    setCount(count + 1);
    if (count <= 10) {
      setItems(
        <tr>
          <td>5 x {count}</td>
          <td>{5 * count}</td>
        </tr>
      );
    }
  }
  console.log(count);
  return (
    <>
      <div className="button">
        <button onClick={addTable}>
          Click to generate Multiplication tables of 5{" "}
        </button>
      </div>
      <table>
        <thead>
          <tr>
            <th>Multiplication</th>
            <th>Results</th>
          </tr>
        </thead>
        <tbody>{items}</tbody>
      </table>
    </>
  );
};

export default App;

Answer 1

好吧，您正在覆盖 onChange 中的项目，您需要附加到它：

setItems([
    ...items,
    <tr>
      <td>5 x {count}</td>
      <td>{5 * count}</td>
    </tr>
]);