如何让这个函数接收数组元素的id，然后分派一个操作?MERN堆栈

Question

此组件的目的是提供一个div，其中包含晚于今天日期的每个约会的详细信息。然后，用户应该能够在输入字段中填写详细信息，然后按提交。提交后，我将尝试调度一个redux操作，并且我需要它接收点击提交按钮的特定约会div的id

我似乎无法使handleSubmit函数正常工作。我看不出我是否赴约了_id错误地输入到按钮的onClick处理程序中，或者如果我将其输入到handleSubmit函数中，则是错误的，或者完全是其他原因。请注意，有两个_id，一个用于约会数组中的特定约会，另一个用于从其父组件传递到组件中的用户。

有人知道如何让它正常工作吗？

import React, { useState } from 'react'
import { useDispatch } from 'react-redux'
import { confirmAppointment } from '../../../actions/appointment'
const ConfirmAppointment = ({user}) => {
const dispatch = useDispatch()
const { appointments, _id } = user?.result
const today = new Date()

const [reasonForMassage, setReasonForMassage] = useState('')
const formData = {
reasonForMassage
}
// SET UP AN ONCLICK FOR EACH BUTTON TO SUBMIT IT'S OWN DISPATCH TO UPDATE APPOINTMENT 
const handleSubmit = (e, appointmentId) => {
e.preventDefault()
console.log(appointmentId, reasonForMassage)
//update appointment with the appointment id
dispatch(confirmAppointment(_id, appointmentId, formData))
}
return (
appointments?.length !== 0 ? (
<div style={{marginTop: '3em'}}>
<h4>Upcoming Appointments</h4>
{appointments && appointments?.map((appointment) => (
new Date(appointment?.date) >= today ? (                  
<div style={{marginBottom: '3em'}} key={appointment._id} >
<table className="ui table">
<thead>
<tr>
<th>Date</th>
<th>Time</th>
<th>Duration</th>
</tr>
</thead>
<tbody>
<tr>
<td>{appointment?.date}</td>
<td>{appointment?.time}</td>
<td>{appointment?.duration}</td>
</tr>
</tbody>
</table>
<form className="ui form" >
<div className="ui fields">
<div className="ui field">
<label>Reason for booking massage:</label>
<input type="text" value={reasonForMassage} onChange={(e)=>setReasonForMassage(e.target.value)}/>
</div>
<div className="ui field">
<h5>I give consent to massage the following areas:</h5>
<div>
<input type="checkbox" />
<label>Glutes</label>
<input type="checkbox" />
<label>Abdomen</label>
<input type="checkbox" />
<label>Chest</label>
<input type="checkbox" />
<label>Inner thighs</label>
</div>
</div>
<div className="ui field">
<label>Are there any other areas you would not like to be massaged?</label>
<input type="text" />
</div>
</div>
<button onClick={()=>handleSubmit(appointment?._id)} className="ui button">Confirm Appointment</button>
</form>                                
</div>
) : (                              
<div></div>
)
))}                 
</div>
) : (
<div>
No upcoming appointments
</div>
)

)
}

export default ConfirmAppointment

Answer 1

您需要从更改按钮的onClick功能

<button
onClick={() => handleSubmit(appointment?._id)}
className='ui button'
>
Confirm Appointment
</button>

至

<button
onClick={e => handleSubmit(e, appointment?._id)}
className='ui button'
>
Confirm Appointment
</button>