React Antd中如何从列表向Drawer传递用户ID数据

你的核心问题是没有存储当前选中的用户状态，导致Drawer和Tabs组件无法获取到点击的用户数据。以下是具体解决步骤和修改后的代码：

关键修改点 #

• 新增selectedUser状态，存储当前点击的用户信息
• 修改点击事件，传递当前用户到状态中
• 所有Drawer内的动态数据都基于selectedUser渲染，增加非空判断避免报错
• Tabs的子组件根据selectedUser的ID传递参数

修改后的完整代码 #

import React, { useState, useEffect } from "react";
import axios from "axios";
import { Button, Space, Descriptions, Tabs, List, Avatar, Drawer } from "antd";
import { BulbOutlined, MessageOutlined } from "@ant-design/icons";
import UserIdeas from "./UserIdeas";
import UserMessages from "./UserMessages";

const UserDrawer = () => {
  const [user_list, setUserList] = useState([]); // 初始化为空数组更合理
  const [selectedUser, setSelectedUser] = useState(null); // 新增：存储当前选中的用户
  const [open, setOpen] = useState(false);
  const [size, setSize] = useState();

  // 获取用户列表
  const getAllData = () => {
    const user_access_token = localStorage.getItem("user_access_token");
    axios
      .get(`${process.env.REACT_APP_API_URL}reports/product/1/users`, {
        headers: {
          Authorization: `Bearer ${user_access_token}`,
        },
      })
      .then((response) => {
        setUserList(response.data);
      })
      .catch((error) => console.error(error));
  };

  useEffect(() => {
    getAllData();
  }, []);

  // 修改：打开Drawer时同时设置选中的用户
  const showLargeDrawer = (user) => {
    setSelectedUser(user);
    setOpen(true);
  };

  const onClose = () => {
    setOpen(false);
    setSelectedUser(null); // 关闭时清空选中状态
  };

  return (
    <>
      <List
        itemLayout="vertical"
        dataSource={user_list}
        renderItem={(item) => (
          <List.Item key={item.userId}>
            <List.Item.Meta
              title={
                <a onClick={() => showLargeDrawer(item)}>
                  {item.title}
                </a>
              }
            />
          </List.Item>
        )}
      />

      <Drawer
        title={selectedUser?.title} // 使用可选链避免空值报错
        placement="right"
        size={size}
        onClose={onClose}
        open={open}
        extra={
          <Space>
            <Button type="primary" onClick={onClose}>
              close
            </Button>
          </Space>
        }
      >
        {/* 只有选中用户存在时才渲染详情 */}
        {selectedUser && (
          <>
            <Descriptions>
              <Descriptions.Item label="E-Mail Address">
                {selectedUser.email}
              </Descriptions.Item>
              <Descriptions.Item label="Location">
                {selectedUser.location}
              </Descriptions.Item>
            </Descriptions>

            <Tabs
              tabPosition="left"
              defaultActiveKey="1"
              closable
              items={[
                {
                  key: "1",
                  label: (
                    <span>
                      <BulbOutlined /> Ideas
                    </span>
                  ),
                  children: <UserIdeas user_id={selectedUser.userId} />,
                },
                {
                  key: "2",
                  label: (
                    <span>
                      <MessageOutlined /> Comments
                    </span>
                  ),
                  children: <UserMessages user_id={selectedUser.userId} />,
                },
              ]}
            />
          </>
        )}
      </Drawer>
    </>
  );
};

export default UserDrawer;

额外说明 #

• 使用**可选链操作符?.**处理selectedUser为空的情况，避免页面报错
• 关闭Drawer时清空selectedUser状态，避免下次打开时显示旧数据
• 将getData重命名为setUserList，符合React useState命名规范
• 用模板字符串拼接API地址，代码更简洁

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