如何在反应中单击按钮打开具有特定数据集的新页面?

Question

我是React的新手，我确实有一些React项目我正在工作和学习。现在我有了一段代码，我能够成功地呈现来自Node+MSSQL后端的数据。我的问题是使用一个按钮点击数据集中的一个数据，如何在下一页显示特定的细节。

SingleShopOrder.js
路由:http://localhost:3000/SingleShopOrder

import React, { useEffect, useState } from 'react'
import axios from 'axios'
import { Link } from "react-router-dom";
import '../App.css';
const SingleShopOrder = () => {
const [shopOrder, setshopOrder] = useState([]);
useEffect(() => {
fetchNormacs();
}, []);
const fetchNormacs = () => {
axios
.get('http://localhost:8090/api/ctms/normacs/machine/NOR1')
.then((res) => {
// console.log(res);
setshopOrder(res.data);
})
.catch((err) => {
console.log(err);
});
};
const [message, setMessage] = useState([]);

const handleChange = event => {
setMessage(event.target.value);
}
const begin = ()=> {
console.log("Clicked")
}
if(shopOrder) {
return(

<>
<div className='mainCard'>
<div className="container column-left">
<div className="item">
<Link className="navStyle" to="/Overview" onClick={() => begin()}>
Overview
</Link>
</div>
<div className="item">
<Link className="navStyle" to="/ShopOrder" onClick={() => begin()}>
Shop Order
</Link>
</div>
<div className="item">
<Link className="navStyle" to="/Employee" onClick={() => begin()}>
Employee
</Link>
</div>
<div className="item">
<Link className="navStyle" to="/Maintenance" onClick={() => begin()}>
Maintenance
</Link>
</div>
</div>
<div className='column-right'>
<h2 className='so_header'>Select shop order for Normac 1</h2>
<div className='wc'>
{shopOrder.map((so) => (
<div key={so.ID}>
<h3>S/O No :{so.ord_no}</h3>
<p>Item No :{so.item_no}</p>
<p>Item Desc :{so.item_desc_1}</p>
<button id="message" name="message" value={"1"} onClick={handleChange}>SELECT</button>
</div>
))}
</div>
</div>
</div>
</>

)
}
return (
<h1>Check the KepServer tags!!!</h1>
)
}
export default SingleShopOrder;

SingleShopOrder"页

VerifySingleShopOrder.js

import React, { useEffect, useState } from 'react'
import { Link } from "react-router-dom";
import '../App.css';
const VerifySingleShopOrder = ({ID,ord_no,item_no,item_desc_1}) => {

const [message, setMessage] = useState([]);

const handleChange = event => {
setMessage(event.target.value);
}
const begin = ()=> {
console.log("Clicked")
}
return(
<>
<div className='mainCard'>
<div className="container column-left">
<div className="item">
<Link className="navStyle" to="/Overview" onClick={() => begin()}>
Overview
</Link>
</div>
<div className="item">
<Link className="navStyle" to="/ShopOrder" onClick={() => begin()}>
Shop Order
</Link>
</div>
<div className="item">
<Link className="navStyle" to="/Employee" onClick={() => begin()}>
Employee
</Link>
</div>
<div className="item">
<Link className="navStyle" to="/Maintenance" onClick={() => begin()}>
Maintenance
</Link>
</div>
</div>
<div className='column-right'>
<h2 className='so_header'>Verify shop order for Normac 1</h2>
<div className='wc'>
<h3>S/O No :{ord_no}</h3>
<p>Item No :{item_no}</p>
<p>Item Desc :{item_desc_1}</p>
<button id="message" name="message" value={"1"} onClick={handleChange}>LOGIN & VERIFY</button>
</div>
</div>
</div>
</>
)
}
export default VerifySingleShopOrder;

VerifySingleShopOrder"页

我试图从"SingleShopOrder";VerifySingleShopOrder"页，以获取任意"select"的数据。按钮点击。我在这里传递props做错了什么?我应该如何显示预期的输出?

Answer 1

我重写一下:

import React, { useEffect, useState } from "react";
import axios from "axios";
import { Link } from "react-router-dom";
import "../App.css";
const SingleShopOrder = () => {
const [shopOrder, setshopOrder] = useState([]);
const [message, setMessage] = useState(0); // if message is not an array
// then do not initialize the state as []
// by the way the name of the var is confusing me
// if it is supposed to store the selected order then 'message' is
// inaccurate
const fetchNormacs = () => {
axios
.get("http://localhost:8090/api/ctms/normacs/machine/NOR1")
.then((res) => {
// console.log(res);
setshopOrder(res.data);
})
.catch((err) => {
console.log(err);
});
};
// here we are expecting order's id
const handleChange = ({target:{value}}) => {
// setMessage(value); // use this line if ID is a string
setMessage(Number(value)) // use this line if ID is a number
};
const begin = () => {
console.log("Clicked");
};
useEffect(() => {
fetchNormacs();
}, []);

if (shopOrder) {
return (
<>
<div className="mainCard">
<div className="container column-left">
<div className="item">
<Link className="navStyle" to="/Overview" onClick={() => begin()}>
Overview
</Link>
</div>
<div className="item">
<Link
className="navStyle"
to="/ShopOrder"
onClick={() => begin()}
>
Shop Order
</Link>
</div>
<div className="item">
<Link className="navStyle" to="/Employee" onClick={() => begin()}>
Employee
</Link>
</div>
<div className="item">
<Link
className="navStyle"
to="/Maintenance"
onClick={() => begin()}
>
Maintenance
</Link>
</div>
</div>
<div className="column-right">
<h2 className="so_header">Select shop order for Normac 1</h2>
<div className="wc">
{shopOrder.map((so) => (
<div key={so.ID}>
<h3>S/O No :{so.ord_no}</h3>
<p>Item No :{so.item_no}</p>
<p>Item Desc :{so.item_desc_1}</p>
<button
id="message"
name="message"
value={so.ID} // se the button value to current order's id
onClick={handleChange}
>
SELECT
</button>
</div>
))}
</div>
</div>
</div>
</>
);
}

// check if message is different from the initial state
if (message !== 0) return <VerifySingleShopOrder
order={shopOrder.find(item => item.id === message)} // pass your props here
/> 

return <h1>Check the KepServer tags!!!</h1>;
};
export default SingleShopOrder;

然后在VerifySingleShopOrder组件中:

import React, { useEffect, useState } from 'react'
import { Link } from "react-router-dom";
import '../App.css';
// component now is expecting a prop called 'order' which have all the
// properties you need to display detailed message
const VerifySingleShopOrder = ({order:{ID,ord_no,item_no,item_desc_1}}) => {
const [message, setMessage] = useState([]);
const handleChange = event => {
setMessage(event.target.value);
}
const begin = ()=> {
console.log("Clicked")
}
return(
<>
<div className='mainCard'>
<div className="container column-left">
<div className="item">
<Link className="navStyle" to="/Overview" onClick={() => begin()}>
Overview
</Link>
</div>
<div className="item">
<Link className="navStyle" to="/ShopOrder" onClick={() => begin()}>
Shop Order
</Link>
</div>
<div className="item">
<Link className="navStyle" to="/Employee" onClick={() => begin()}>
Employee
</Link>
</div>
<div className="item">
<Link className="navStyle" to="/Maintenance" onClick={() => begin()}>
Maintenance
</Link>
</div>
</div>
<div className='column-right'>
<h2 className='so_header'>Verify shop order for Normac 1</h2>
<div className='wc'>
<h3>S/O No :{ord_no}</h3>
<p>Item No :{item_no}</p>
<p>Item Desc :{item_desc_1}</p>
<button id="message" name="message" value={"1"} onClick={handleChange}>LOGIN & VERIFY</button>
</div>
</div>
</div>
</>
)
}
export default VerifySingleShopOrder;

当然，这段代码看起来很丑…但是对于初学者来说，这是可以的，关于react

你还有很多要学的。希望对你有帮助