Question

我是一个非常新的反应者，而且大多数都是自学的，而且绝对是一个可以真正使用帮助的新手。我正在建立一个employee（contractor）目录，该目录列出每个员工发票，然后显示要打印或下载的单个发票。我有一个页面，该页面显示所有员工，然后链接到一个页面，该页面显示每个员工的“发票”列表。在该“发票”页面上，单击发票ID号（即数据库ID号），然后链接到一个单独的页面，该页面仅显示该发票的详细信息。问题是我不知道如何显示单个发票明细。我唯一能显示的是发票编号，我相信这是因为我为此创建了一个变量。我不知道如何将发票数据输入此组件。我尝试为所需的数据以及发票编号（例如“ payperiodstart”）创建其他变量，但我什至不知道如何调用该数据。任何帮助将不胜感激。

员工发票清单组件

`class EmployeeShow extends Component {state = {
employee: '',
invoices: [],
newInvoice: {
date: '', 
payperiodstart: '', 
payperiodend: '', 
name: '', total: '',}}

componentDidMount()
{const employeeId = this.props.match.params.employeeId
axios.get(`/api/employees/${employeeId}`).then(res => {console.log(res.data)this.setState({ employee: res.data, invoices: res.data.invoices,})}) } handleClick = (index) => {
console.log("This is the handle click event for invoiceId" + ' ' + index);}`

我的回报

`<Link to=`/employees/${this.props.match.params.employeeId}/invoices/${invoice._id}` 
onClick={this.handleClick.bind(this, invoice._id)}>
<div className="invoiceNum">ID:{invoice._id} </div><br />
</Link>`

控制台日志 This is the handle click event for invoiceId 5d71960e780a78a222cf9dd5

发票组件

`class Invoices extends Component {
state= {
employee: '',
employeename: '',
invoices:[],
invoice: {
date: '',
payperiodstart: '',
payperiodend: '',
total: '',}}

componentDidMount() {
const invoiceId = this.props.match.params.invoiceId
const employeeId = this.props.match.params.employeeId axios.get(`/api/employees/${employeeId}/invoices/${invoiceId}`).then(res => {
console.log(invoiceId, this.state)
this.setState({
employee: res.data,
invoices: res.data,})
})
}`

我的回报

`employeeId# {this.props.match.params.employeeId}
invoiceId# {this.props.match.params.invoiceId}
<button onClick={console.log(this.props.match.params)}>button</button> `

控制台日志

`5d71960e780a78a222cf9dd5 {employee: "", employeename: "", invoices: Array(0), invoice: {…}
{employeeId: "5d69cb95966730ed8bbe4622", invoiceId: "5d71960e780a78a222cf9dd5"}`

React Mern Axios堆栈应用程序-从列表中获取一个数据库ID及其数据，并显示在单独的页面上

0 个答案: