如何将用户详情传入Modal？点击按钮后模态框无用户信息问题排查

核心问题1：useParams() 获取不到正确的用户ID #

你的组件通过useParams()获取id，但如果这个组件不是挂载在带:id参数的路由下（比如它是列表项中的子组件，路由路径类似/contacts而非/contacts/:id），useParams()会返回空的id，自然找不到对应用户。

修复：通过props传递用户ID #

在父组件的列表中，把当前用户的id通过props传给InfoModal：

// 父组件中使用InfoModal时
<InfoModal userId={user.id} />

然后在InfoModal中接收props并替换useParams()：

// InfoModal组件修改
const InfoModal = ({ userId }) => { // 接收props的userId
  // 移除const { id } = useParams();
  useEffect(() => {
    const contactInfo = contacts.find((user) => user.id === userId);
    if (contactInfo) {
      SetContactInfo(contactInfo);
    }
  }, [userId, contacts]); // 依赖改为userId
  // ...其他代码不变
};

核心问题2：ID类型不匹配导致find失败 #

如果contacts数组中用户的id是数字类型，而useParams()获取的id是字符串类型，===严格相等会匹配失败，找不到用户。

修复：统一ID类型 #

根据实际数据类型，统一匹配时的类型：

// 若contacts里id是数字，把userId转为数字
const contactInfo = contacts.find((user) => user.id === Number(userId));

或者在存储用户数据时，将id统一存为字符串类型。

额外排查点：初始状态与数据加载时机 #

• 检查GlobalContext中的contacts是否在组件挂载时已加载完成：如果contacts初始为空数组，第一次useEffect执行时找不到用户，需确保数据加载完成后再渲染组件，或在useEffect中处理空数组情况。
• 点击按钮时打印关键数据，确认匹配逻辑：

const showModal = () => {
  setIsModalVisible(true);
  console.log("当前用户ID:", userId);
  console.log("所有联系人:", contacts);
};

最终修改后的完整代码示例 #

import React, { useState, useEffect, useContext } from "react";
import { Modal } from "antd";
import InfoIcon from "../assets/icons/InfoIcon";
import 'antd/dist/antd.css';
import { GlobalContext } from "../context/GlobalState";

const InfoModal = ({ userId }) => {
  const { contacts } = useContext(GlobalContext);

  const [contactInfo, SetContactInfo] = useState({
    id: "",
    name: "",
    surname: "",
    fatherName: "",
    specialty: "",
    email: "",
    gender: "",
    test:''
  });

  useEffect(() => {
    // 自动适配ID类型，避免匹配失败
    const targetId = typeof contacts[0]?.id === 'number' ? Number(userId) : userId;
    const foundContact = contacts.find((user) => user.id === targetId);
    if (foundContact) {
      SetContactInfo(foundContact);
    } else {
      // 找不到用户时重置状态
      SetContactInfo({
        id: "",
        name: "",
        surname: "",
        fatherName: "",
        specialty: "",
        email: "",
        gender: "",
        test:''
      });
    }
  }, [userId, contacts]);

  const [isModalVisible, setIsModalVisible] = useState(false);

  const showModal = () => {
    setIsModalVisible(true);
    console.log("当前选中用户信息:", contactInfo);
  };

  const handleOk = () => {
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  return (
    <div>
      <div onClick={showModal}>
        <InfoIcon />
      </div>
      <Modal
        title="用户详情"
        visible={isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <p>姓名: {contactInfo.name} {contactInfo.surname}</p>
        <p>邮箱: {contactInfo.email}</p>
        <p>专业: {contactInfo.specialty}</p>
        <p>性别: {contactInfo.gender}</p>
      </Modal>
    </div>
  );
};

export default InfoModal;

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