Javascript React Ant d模式组件循环无法将项数据呈现为jsx内容

大家好，我使用的是React Js“Ant designModal Component”，点击一个按钮，Modal就会打开，它会将每个用户的内容显示到他们各自的唯一id上，但我在onclick的所有Modal上都会得到相同的id。请帮帮我，单击按钮后，我应该在模式中获得它们各自的id。这是我的代码SandboxLink

从“React”导入React；
从“axios”导入axios；
从“antd”导入{按钮，模态}；
导入“antd/dist/antd.css”；
导入“/Users.css”；
类用户扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
用户列表：[]，
可见：假，
};
}
componentDidMount（）{
get（“/Test.json”）。然后（（res）=>{
this.setState（{usersList:res.data.members}）；
});
}
showModal=（）=>{
这是我的国家({
可见：对，
});
};
handleCancel=（e）=>{
控制台日志（e）；
这是我的国家({
可见：假，
});
};
render（）{
log（this.state.usersList）；
const users=this.state.usersList.map（（项）=>(
{item.real_name}
开放模态
{item.id}
));
返回(
使用者
{users}
);
}
}
导出默认用户；

---

这是我的CodesandboxLink

实际上，您需要将当前项目存储在单独的变量中，以便可以传递到您的模型并正确使用它，请检查codesandbox：

从“React”导入React；
从“axios”导入axios；
从“antd”导入{按钮，模态}；
导入“antd/dist/antd.css”；
导入“/Users.css”；
类用户扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
用户列表：[]，
可见：假，
当前项：{}
};
}
componentDidMount（）{
get（“/Test.json”）。然后（res=>{
this.setState（{usersList:res.data.members}）；
});
}
showModal=项目=>{
这是我的国家({
可见：对，
当前项目：项目
});
};
handleCancel=e=>{
控制台日志（e）；
这是我的国家({
可见：假
});
};
render（）{
log（this.state.usersList）；
const users=this.state.usersList.map（项=>(
{item.real_name}
this.showmodel（item）}>{/*在此处传递item*/
开放模态
{this.state.currentItem.id}
));
返回(
使用者
{users}
);
}
}
导出默认用户；

假设我想循环嵌套在json中的“activity\u periods”数组，并想在单击该数组时显示“start\u time”属性，我将如何操作？请您帮助我解决这个问题。只需映射它们，检查：

import React from "react";
import axios from "axios";
import { Button, Modal } from "antd";
import "antd/dist/antd.css";
import "./Users.css";

class Users extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      usersList: [],
      visible: false,
    };
  }
  componentDidMount() {
    axios.get("/Test.json").then((res) => {
      this.setState({ usersList: res.data.members });
    });
  }
  showModal = () => {
    this.setState({
      visible: true,
    });
  };

  handleCancel = (e) => {
    console.log(e);
    this.setState({
      visible: false,
    });
  };
  render() {
    console.log(this.state.usersList);

    const users = this.state.usersList.map((item) => (
      <div key={item.id} className="users_list">
        <li>{item.real_name}</li>

        <Button type="primary" onClick={this.showModal}>
          Open Modal
        </Button>
        <Modal
          title="Users Activity"
          visible={this.state.visible}
          onCancel={this.handleCancel}
          footer={null}
        >
          {item.id}
        </Modal>
      </div>
    ));

    return (
      <div>
        <h1 className="user_heading">Users</h1>
        <ul className="users_list_names">{users}</ul>
      </div>
    );
  }
}

export default Users;

import React from "react";
import axios from "axios";
import { Button, Modal } from "antd";
import "antd/dist/antd.css";
import "./Users.css";

class Users extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      usersList: [],
      visible: false,
      currentItem: {}
    };
  }
  componentDidMount() {
    axios.get("/Test.json").then(res => {
      this.setState({ usersList: res.data.members });
    });
  }
  showModal = item => {
    this.setState({
      visible: true,
      currentItem: item
    });
  };

  handleCancel = e => {
    console.log(e);
    this.setState({
      visible: false
    });
  };
  render() {
    console.log(this.state.usersList);

    const users = this.state.usersList.map(item => (
      <div key={item.id} className="users_list">
        <li>{item.real_name}</li>

        <Button type="primary" onClick={() => this.showModal(item)}> {/*pass item here */
          Open Modal
        </Button>
        <Modal
          title="Users Activity"
          visible={this.state.visible}
          onCancel={this.handleCancel}
          footer={null}
        >
          {this.state.currentItem.id}
        </Modal>
      </div>
    ));

    return (
      <div>
        <h1 className="user_heading">Users</h1>
        <ul className="users_list_names">{users}</ul>
      </div>
    );
  }
}

export default Users;