如何从表格行向Modal传递ID参数？

核心问题分析 #

你已经在点击表格按钮时把ID传入了toggle函数，但没有将这个ID存储下来并关联到Formik表单的idTR字段，导致提交请求时idTR始终为空。

具体修复步骤 #

1. 添加状态存储选中的ID
   在组件顶部新增状态，用来保存当前点击的表格行ID：

const [currentIdTR, setCurrentIdTR] = useState("");

2. 更新toggle函数，同步ID状态
   修改toggle函数，在打开Modal时记录ID，关闭时清空，避免残留旧值：

const toggle = useCallback((idd) => {
  if (modal) {
    setModal(false);
    setCurrentIdTR("");
  } else {
    setModal(true);
    setCurrentIdTR(idd);
  }
}, [modal]);

3. 关联Formik表单与ID状态
   利用Formik的enableReinitialize特性，把initialValues里的idTR设为currentIdTR，让表单自动同步选中的ID：

initialValues: {
  idTR: currentIdTR,
  securityQuestion: "",
  secretAnswer: "",
},

4. 修正请求体的ID赋值
   在Formik的onSubmit中，直接使用表单值里的idTR（或currentIdTR）填充请求体：

onSubmit: (values) => {
  const updateTransfer = {
    idTR: values.idTR,
    securityQuestion: Number(values["securityQuestion"]),
    secretAnswer: values["secretAnswer"],
  };
  setloading(true);
  dispatch(updateTransferPoint(updateTransfer));
  setloading(false);
  validation.resetForm();
  toggle();
},

完整修改后的关键代码片段 #

const TransferPoint = () => {
  const dispatch = useDispatch();
  const [transferPointList, lode, error, transferPointLists] = Transferpointhook();
  const [loading, setloading] = useState(true);
  const [modal, setModal] = useState(false);
  // 新增状态存储选中的ID
  const [currentIdTR, setCurrentIdTR] = useState("");

  const {
    transferPointListss
  } = useSelector((state) => ({
    transferPointListss: state.TransferPoin.transferPointList,
  }));

  // validation
  const validation = useFormik({
    enableReinitialize: true,
    initialValues: {
      // 关联当前选中的ID
      idTR: currentIdTR,
      securityQuestion: "",
      secretAnswer: "",
    },
    validationSchema: Yup.object({
      securityQuestion: Yup.number().required("Please Select Question"),
      secretAnswer: Yup.string().required("Please Answer"),
    }),
    onSubmit: (values) => {
      const updateTransfer = {
        // 使用表单同步后的ID
        idTR: values.idTR,
        securityQuestion: Number(values["securityQuestion"]),
        secretAnswer: values["secretAnswer"],
      };
      setloading(true);
      dispatch(updateTransferPoint(updateTransfer));
      setloading(false);
      validation.resetForm();
      toggle();
    },
  });

  // 更新后的toggle函数
  const toggle = useCallback((idd) => {
    if (modal) {
      setModal(false);
      setCurrentIdTR("");
    } else {
      setModal(true);
      setCurrentIdTR(idd);
    }
  }, [modal]);

  // ... 其余代码保持不变
};

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