React CRUD表单编辑时如何设置Select组件的选中项？

你的表单中文本输入框能正常填充，但Select组件无法选中对应选项，核心问题是Select绑定的selectValues状态在编辑时没有同步更新form里的编辑数据，同时维护了两套状态（form和selectValues）导致数据不一致。

修复方案 #

1. 删除冗余的selectValues状态，直接让Select绑定form内对应的字段，编辑时更新form即可同步选中状态
2. 统一使用handleChange处理所有表单控件的变更，无需单独写handleSelect

修改后的完整代码 #

RegisterFormTeam组件

import React, { useEffect, useState } from "react";

const initialFormTeam = {
  equipos_id: null,
  nombre: "",
  entrenador: "",
  estatus: "",
  competencia: "",
  grupo: null,
};

function RegisterFormTeam(props) {
  const {
    createTeam,
    dataTrainer,
    dataStatus,
    dataCompetition,
    dataToEdit,
    setDataToEdit,
    updateTeam,
  } = props;

  // 只维护form一套状态即可
  const [form, setForm] = useState(initialFormTeam);
  const [message, setMessage] = useState();
  const [response, setResponse] = useState(null);

  useEffect(() => {
    if (dataToEdit) {
      // 编辑时直接把数据赋值给form，确保字段类型与select选项匹配
      setForm({
        ...dataToEdit,
        entrenador: String(dataToEdit.entrenador),
        estatus: String(dataToEdit.estatus),
        competencia: String(dataToEdit.competencia),
      });
    } else {
      setForm(initialFormTeam);
    }
  }, [dataToEdit]);

  // 统一处理所有表单控件的变更
  const handleChange = (e) => {
    setForm({
      ...form,
      [e.target.name]: e.target.value,
    });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (form.equipos_id === null) {
      createTeam(form);
      setMessage("Team added successfully");
      setResponse(true);
      setTimeout(() => {
        setResponse(false);
      }, 3000);
    } else if (form.equipos_id !== null) {
      updateTeam(form, {
        nombre: form.nombre,
        entrenador: form.entrenador,
        estatus: form.estatus,
        competencia: form.competencia,
      });
    }
    handleReset();
  };

  const handleReset = () => {
    setForm(initialFormTeam);
    setDataToEdit(null);
  };

  return (
    <div>
      <h1>Register your teams</h1>
      <form onSubmit={handleSubmit}>
        <h3>{dataToEdit ? "Edit" : "Add"}</h3>
        <label htmlFor="nombre">Name of the team </label>
        <input
          type="text"
          id="nombre"
          name="nombre"
          onChange={handleChange}
          value={form.nombre}
          placeholder="Write the name of the team"
        />
        <br />
        <br />
        <label htmlFor="trainer">Trainer </label>
        <select
          id="trainer"
          name="entrenador"
          onChange={handleChange}
          value={form.entrenador}
        >
          <option value="" hidden>
            Select the trainer
          </option>
          {dataTrainer.length > 0 ? (
            dataTrainer[0].users.map((el, index) => (
              <option key={index} value={String(el.user_id)}>
                {`${el.nombres} ${el.apellidos}`}
              </option>
            ))
          ) : (
            <option value="" disabled>
              Loading...
            </option>
          )}
        </select>
        <br />
        <br />
        <label htmlFor="status">Status </label>
        <select
          id="statusTeam"
          name="estatus"
          onChange={handleChange}
          value={form.estatus}
        >
          <option value="" hidden>
            Select status team
          </option>
          {dataStatus.length > 0 ? (
            dataStatus.map((el, index) => (
              <option key={index} value={String(el.catalogo_id)}>
                {el.clave}
              </option>
            ))
          ) : (
            <option value="" disabled>
              Loading...
            </option>
          )}
        </select>
        <br />
        <br />
        <label htmlFor="competition">Competition </label>
        <select
          id="competitionTeam"
          name="competencia"
          onChange={handleChange}
          value={form.competencia}
        >
          <option value="" hidden>
            Select competition
          </option>
          {dataCompetition.length > 0 ? (
            dataCompetition.map((el, index) => (
              <option key={index} value={String(el.competicion_id)}>
                {el.nombre}
              </option>
            ))
          ) : (
            <option value="" disabled>
              Loading...
            </option>
          )}
        </select>
        <br />
        <br />
        <input type="submit" value={dataToEdit ? "Edit" : "Add team"} />
        <input type="reset" value="Clear" onClick={handleReset} />
      </form>
      {response && <p>{message}</p>}
    </div>
  );
}

export default RegisterFormTeam;

TableRowTeam组件（无需修改）

const TableRowTeam = ({ el, deleteTeam, setDataToEdit }) => {
  return (
    <tr>
      <td>{el.nombre}</td>
      <td>{`${el.users.nombres} ${el.users.apellidos}`}</td>
      <td>{el.catalogos.clave}</td>
      <td>{el.competicion.nombre}</td>
      <td>
        <button onClick={() => setDataToEdit(el)}>Edit</button>
        <button onClick={() => deleteTeam(el.equipos_id, el.nombre)}>
          Delete
        </button>
      </td>
    </tr>
  );
};
export default TableRowTeam;

关键修改说明 #

• 移除冗余状态：删掉selectValues，所有表单数据统一存在form中，避免数据不一致
• 统一事件处理：所有input和select都用handleChange，通过name属性自动匹配form字段，减少冗余代码
• 类型匹配：把select的value和编辑数据都转成字符串类型，避免后端返回数字类型导致的选中不匹配问题
• 修正字段名：第三个select的name从competition改成competencia，和form中的字段名一致，确保handleChange能正确更新数据

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