ReactJS提交表单数据到表格时页面刷新数据不存储如何解决

问题根因 #

• 表单默认提交行为未阻止，导致页面刷新，状态丢失
• 状态定义逻辑冲突：初始workout为数组，后续handleChange直接将其改写为单个对象，无法同时承载表单临时输入值和所有训练项列表
• 直接修改state（workout.push）不符合React状态不可变原则，无法触发组件重新渲染，页面不会更新
• 表格仅渲染单个数据，没有遍历所有已提交的训练项生成多行

修正后代码 #

import React from 'react'
import './Trainerworkout.css'
import { useState } from 'react';

export default function Trainerworkout() {
  // 存所有已提交的训练项列表
  const [workoutList, setWorkoutList] = useState([])
  // 存表单临时输入值
  const [formData, setFormData] = useState({
    Exercise: "", 
    Sets: "", 
    Reps: "", 
    Description: ""
  })

  function handleChange(event) {
    const value = event.target.value;
    setFormData({
      ...formData,
      [event.target.name]: value
    });
  }

  function handleSubmit(event) {
    // 阻止表单默认提交刷新页面的行为
    event.preventDefault();
    // 将当前表单值追加到训练列表，遵循不可变原则
    setWorkoutList([...workoutList, {...formData}])
    // 重置表单输入框
    setFormData({
      Exercise: "", 
      Sets: "", 
      Reps: "", 
      Description: ""
    })
  }


  return (
    <>
      <h3>Add a workout program to a client</h3>

      <form onSubmit={handleSubmit}>
        <label>
          Exercise:
          <input type="text" name="Exercise" value={formData.Exercise} onChange={handleChange}></input>
        </label>
        <br></br>
        <br></br>
        <label>
          Set:
          <input type="text" name="Sets" value={formData.Sets} onChange={handleChange}></input>
        </label>
        <br></br>
        <br></br>
        <label>
          Reps:
          <input type="text" name="Reps" value={formData.Reps} onChange={handleChange}></input>
        </label>
        <br></br>
        <br></br>
        <label>
          Description:
          <input type="text" name="Description" value={formData.Description} onChange={handleChange}></input>
        </label>
        <br></br>
        <br></br>

        <button type="submit">Add exercise to workoutprogram</button>
      </form>

      <div className="table">
        <table className="exerciseTable">
          <thead>
            <tr>
              <th>Exercise</th>
              <th>Set</th>
              <th>Reps</th>
              <th>Description</th>
            </tr>
          </thead>
          <tbody>
            {/* 遍历所有训练项渲染多行 */}
            {workoutList.map((item, index) => (
              <tr key={index}>
                <td>{item.Exercise}</td>
                <td>{item.Sets}</td>
                <td>{item.Reps}</td>
                <td>{item.Description}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </>
  );
}

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