React中点击编辑按钮无法传递对应Experience ID至弹窗以加载数据的技术问题咨询

我来帮你搞定这个问题！核心就是在点击编辑按钮时，把对应经历的ID传递给编辑弹窗组件，这样就能根据ID拉取对应的数据了。下面是具体的修改步骤和调整后的代码：

步骤1：在Experience组件中添加存储当前编辑ID的状态 #

首先在Experience.js里，新增一个状态变量来保存当前要编辑的经历ID，同时修改编辑按钮的点击逻辑，把ID存进去再打开弹窗：

import React, {useState, useEffect } from "react";
import axios from 'axios';
import { Modal } from "react-bootstrap";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faPencilAlt} from '@fortawesome/free-solid-svg-icons';
import ExperienceAddPopup from "./ExperiencePopup";
import ExperienceEditPopup from "./ExperienceEditPopup";

export default function Experience({logged_user}) {
  const [modalShow, setModalShow] = React.useState(false);
  // 新增状态：存储当前要编辑的经历ID
  const [currentEditExperienceId, setCurrentEditExperienceId] = useState(null);

  // 注意：确保experienceArray和singleUserDetail在你的实际代码中已定义
  return (
    <div className="exp-details">
      {experienceArray.map((experience, i) => {
        return(
          <span key={experience.id}>
            <div className="exph1">{experience.title}
              {/* 修改点击事件：先设置当前编辑ID，再打开弹窗 */}
              <span onClick={() => {
                setCurrentEditExperienceId(experience.id);
                setModalShow(true);
              }}>
                <FontAwesomeIcon className="nav-icon float-right text-muted" icon={faPencilAlt} />
              </span>
            </div>
            {/* 把当前编辑ID作为props传给弹窗组件，关闭弹窗时清空ID */}
            <ExperienceEditPopup 
              logged_user={singleUserDetail.actable_id} 
              show={modalShow} 
              onHide={() => {
                setModalShow(false);
                setCurrentEditExperienceId(null); // 避免下次弹窗携带旧ID
              }}
              experienceId={currentEditExperienceId} // 传递编辑ID
            />
            <div className="exph2">{experience.company_name}.</div>
            <div className="exph3">{experience.start_year} - {experience.end_year}</div>
            <hr/>
          </span>
        );
      }) }
    </div>
  )
}

步骤2：在编辑弹窗组件中接收并使用传递过来的ID #

接下来修改ExperienceEditPopup.js，从props中拿到传递过来的ID，然后用这个ID去请求对应的数据：

import React, {useState, useEffect } from "react";
import axios from 'axios';
import { Modal } from "react-bootstrap";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faPencilAlt} from '@fortawesome/free-solid-svg-icons';

const ExperienceEditPopup = props => {
  // 从props中获取传递过来的经历ID
  let logged_user_id = props.logged_user;
  let experience_id = props.experienceId;
  
  const [experienceData, setExperienceData] = React.useState({}); // 用对象存储单条经历数据更合理

  const getExperienceUserDetails = (experience_id, logged_user_id) => {
    axios
      .get(`http://localhost:3001/users/${logged_user_id}/experiences/${experience_id}`, { withCredentials: true })
      .then((response) => {
        const experienceData = response.data;
        setExperienceData(experienceData);
        console.log(experienceData);
      })
      .catch((error) => {
        console.log(" error", error);
      });
  };

  React.useEffect(() => {
    // 只有当experience_id存在时才请求数据
    if (experience_id) {
      getExperienceUserDetails(experience_id, logged_user_id);
    }
  }, [experience_id, logged_user_id]);

  // 补充输入框变更处理函数
  const handleChange = (e) => {
    setExperienceData(prev => ({...prev, [e.target.name]: e.target.value}));
  };

  // 补充表单提交处理函数
  const handleExperienceEditSubmit = (e) => {
    e.preventDefault();
    // 这里可以添加提交编辑的API请求逻辑，比如axios.put
    console.log("提交的编辑数据：", experienceData);
    props.onHide(); // 提交后关闭弹窗
  };

  return (
    <Modal {...props} size="lg" aria-labelledby="contained-modal-title-vcenter" centered >
      <div className="modal-header">
        <h5 className="modal-title" id="exampleModalLongTitle">Edit Experience</h5>
        <button type="button" className="close" onClick={props.onHide} aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <form onSubmit={handleExperienceEditSubmit}>
        <div className="modal-body">
          <input 
            type="text" 
            className="form-control" 
            value={experienceData.title || ""} 
            name="title" 
            onChange={handleChange} 
            placeholder="Designation" 
          />
          <input 
            type="text" 
            className="form-control" 
            value={experienceData.company_name || ""} 
            name="company_name" 
            onChange={handleChange} 
            placeholder="Company Name" 
          />
          <input 
            type="text" 
            value={experienceData.location || ""} 
            className="form-control" 
            name="location" 
            onChange={handleChange} 
            placeholder="Location"
          />
        </div>
        <div className="modal-footer">
          <span className="btn_cls"><button className="btn save-btn">Save</button></span>
        </div>
      </form>
    </Modal>
  );
}
export default ExperienceEditPopup;

额外说明 #

• 我把原来的experienceArray改成了experienceData，因为这里只需要单条经历的数据，用对象存储更合理。
• 输入框改用value配合handleChange实现受控组件，确保编辑时的输入能实时同步到状态中。
• 关闭弹窗时清空currentEditExperienceId，避免下次打开弹窗时携带旧ID导致请求错误数据。
• 注意你原代码中缺失的变量（如experienceArray、singleUserDetail）和函数（如handleChange），需要在实际代码中补充完整。

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