React onClick添加表格行异常：点击总是替换同一行求技术支持

问题原因 #

• 原代码中setItems每次直接赋值单个<tr>元素，覆盖了之前的数组内容，而非追加新行。
• setCount是异步更新，直接使用当前count值计算新行内容会滞后一步，导致第一行显示5x0而非5x1。

修改思路 #

1. 状态存数据而非JSX：将items改为存储乘数的数组（比如[1,2,3]），渲染时再根据数据生成表格行，这是React状态管理的最佳实践。
2. 使用函数式更新状态：通过setCount(prev => prev + 1)和setItems(prev => [...prev, newItem])确保获取最新的状态值，避免异步更新导致的错误。

修改后的完整代码 #

import { useState } from "react";
import "./App.css";

const App = (props) => {
  const [count, setCount] = useState(0);
  const [items, setItems] = useState([]); // 存储乘数数组，而非JSX

  function addTable() {
    // 使用函数式更新count，确保拿到最新值
    setCount(prevCount => {
      const newCount = prevCount + 1;
      // 限制最多添加到10行
      if (newCount <= 10) {
        // 往items数组追加新的乘数
        setItems(prevItems => [...prevItems, newCount]);
      }
      return newCount;
    });
  }

  return (
    <>
      <div className="button">
        <button onClick={addTable} disabled={count >= 10}>
          Click to generate Multiplication tables of 5
        </button>
      </div>
      <table>
        <thead>
          <tr>
            <th>Multiplication</th>
            <th>Results</th>
          </tr>
        </thead>
        <tbody>
          {/* 遍历items数组生成表格行 */}
          {items.map((num, index) => (
            <tr key={index}>
              <td>5 x {num}</td>
              <td>{5 * num}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </>
  );
};

export default App;

关键改动说明 #

• 状态存储优化：items数组存储的是乘数（1到10），而非直接存储<tr>元素，这样状态更清晰，也方便后续修改或扩展。
• 函数式更新：在setCount中使用回调函数获取最新的prevCount，确保计算新行的乘数是准确的，同时在setItems中也用回调获取最新的数组，避免覆盖之前的内容。
• 按钮禁用：当count >=10时禁用按钮，防止继续添加超出限制的行，提升用户体验。

内容的提问来源于stack exchange，提问作者S Sahoo