Reactjs 基于传递值id显示数据

我想根据id显示数据。我有两个页面，app.js和display.js。在app.js中，我已经显示了一个表和可点击的数据链接到display.js。但是我不能根据id显示display.js中的数据。我使用API来获取这些数据。display.js中的所有数据都在结果json中循环所有数据，而不仅仅是通过我单击app.js的id

有人能帮我将id从app.js传递到display.js，而不是在display.js上循环数据吗

这是我的密码

App.js

              class App extends React.Component {
                constructor(props) {
                  super(props);
                this.state = {
                  data: [],
                  errors: null,
                  isLoading: true
                };
              }

              getData = async () => {
                const option = {
                  url:api/url
                  method: 'POST',
                  headers: {
                    "Access-Control-Allow-Origin": "*"
                  },
                  data: {
                    "data": {
                      "data": "111111"
                    },
                    "encrypt": 0
                  }
                };

                axios(option)
              .then(response => {
                  const tableData = response.data.data.map(post => {
                      const {id, name, type} = post;
                      return [
                        <Link to={'/display'}>{id}</Link>, //when i click this it link to display.js and in display.js only display data based on this id
                        <Link to={'/display'}>{name}</Link>, 
                        <Link to={'/display'}>{type}</Link>
                      ];
                  });
              this.setState({
                  data: tableData,
                  isLoading: false
                });
              })
                  );
              }

              componentDidMount() {
                this.getData();
              }


                render() {
                  const columns = ["ID", "Name", "Type"];

                  const options = {
                    filterType: "dropdown",
                    responsive: "scroll",
                    selectableRows:false
                  };

                  return (
                    <div>
                    <center><h3>Table</h3></center><br/>

                    {!isLoading ? (
                                <MUIDataTable
                                data={this.state.data}
                                columns={columns}
                                options={options} 
                              />)
                          : (
                            <p>Loading...</p>
                          )}
                            </div>
                            );

                          }
              }

              export default App

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
数据：[]，
错误：null，
孤岛加载：正确
};
}
getData=async（）=>{
常量选项={
url:api/url
方法：“POST”，
标题：{
“访问控制允许来源”：“*”
},
数据：{
“数据”：{
“数据”：“111111”
},
“加密”：0
}
};
axios（可选）
。然后（响应=>{
const tableData=response.data.data.map（post=>{
const{id，name，type}=post；
返回[
{id}，//当我单击此链接时，它将显示display.js，并且在display.js中仅显示基于此id的数据
{name}，
{type}
];
});
这是我的国家({
数据：tableData，
孤岛加载：false
});
})
);
}
componentDidMount（）{
这是getData（）；
}
render（）{
const columns=[“ID”、“Name”、“Type”]；
常量选项={
filterType:“下拉列表”，
响应：“滚动”，
selectableRows:false
};
返回(
表

{！正在加载(
)
: (
加载

)}
);
}
}
导出默认应用程序

display.js

        class App extends React.Component {
          // State will apply to the posts object which is set to loading by default
          constructor(props) {
            super(props);
            this.state = {
              data: [],
              isLoading: true,
              errors: null
            };
        }

          // Now we're going to make a request for data using axios
          getData = async () => {
            const option = {
              url:api/url
              method: 'POST',
              headers: {
                "Access-Control-Allow-Origin": "*"
              },
              data: {
                "data": {
                  "data": "111111"
                },
                "encrypt": 0
              }
            };


            axios(option)
              .then(response => {
                this.setState({
                  data: response.data.data,
                  isLoading: false,
                });
                console.log(response.data);
                const data = JSON.parse(data);
              })

              );
          }


          componentDidMount() {
            this.getData();
        }


          // Putting that data to use
          render() {

            const { isLoading, data} = this.state;
            return (

              <React.Fragment>
                <h3>Data display</h3><br/>
              <div>

                {!isLoading ? (
                  data.map(post => {
                      const {id, name, age, type, gender} = post;

                    return (
                      //from API this data is looping and more than 1, i want to after click id from app.js it will link to this display.js page and only show data based on id
                  <div>
                  <Card>
                  <CardHeader color="info">
                      <h4 >Data </h4>
                    </CardHeader>
                      <CardBody>

                        <div><b>ID</b></div>
                        <div>{id}</div>

                        <div><b>Name</b>
                        <div>{name}</div>

                        <div><b>age</b></div>
                        <div>{age}</div>

                        <div><b>type</b></div>
                        <div >{type}</div>

                        <div><b>gender</b></div>
                        <div>{gender}</div>

                      </CardBody>
                  </Card>

                        <br/>

                        </div>


                      );
                    })
                  ) : (
                    <p>Loading...</p>
                  )}
                </div>
              </React.Fragment>

            );

          }
        }

        export default App;

类应用程序扩展了React.Component{
//状态将应用于posts对象，该对象默认设置为加载
建造师（道具）{
超级（道具）；
此.state={
数据：[]，
孤岛加载：是的，
错误：null
};
}
//现在我们将使用axios请求数据
getData=async（）=>{
常量选项={
url:api/url
方法：“POST”，
标题：{
“访问控制允许来源”：“*”
},
数据：{
“数据”：{
“数据”：“111111”
},
“加密”：0
}
};
axios（可选）
。然后（响应=>{
这是我的国家({
数据：response.data.data，
孤岛加载：false，
});
console.log（response.data）；
const data=JSON.parse（数据）；
})
);
}
componentDidMount（）{
这是getData（）；
}
//利用这些数据
render（）{
const{isLoading，data}=this.state；
返回(
数据显示

{！正在加载(
data.map（post=>{
const{id，name，age，type，gender}=post；
返回(
//从API来看，这个数据是循环的，并且不止1个，我想在点击app.js中的id之后，它会链接到display.js页面，并且只显示基于id的数据
资料
身份证件
{id}
名称
{name}
年龄
{age}
类型
{type}
性别
{性别}


);
})
) : (
加载

)}
);
}
}
导出默认应用程序；

---

任何人都可以根据id在app.js中单击来帮助仅显示page display.js？

您可以在链接子项中的单击行中传递id

在显示组件中，您可以获得随请求一起发送的id

const{data}=this.props.location.data

---

在显示组件中，您将获得所有单击的行数据，您可以从渲染中删除循环以及请求，您可以在链接子级中传递单击行的id

在显示组件中，您可以获得随请求一起发送的id

const{data}=this.props.location.data

---

在显示组件中，您将获得所有单击的行数据，您可以从渲染中删除循环以及请求

我只是尝试，它可以传递id值，但无法显示年龄，基于