Javascript 在React中没有表单或按钮的post请求？

因此，我必须在没有

表单

或

按钮的情况下发出post请求。我有一个
patientInfo
数组，它呈现在一个表上。当用户为患者选择位置时，该患者将具有
时间戳
值。当数组中的患者有一个时间戳时，我应该自动
发布带有时间戳的患者

My
handleAutoObsSubmit（）
有点正常，但问题是，它映射到
PatientArray
上，并多次发送患者，因此如果用户选择第三个患者的位置，将发送同一患者的三个对象

我遇到的另一个问题是
componentdiddupdate
，它每秒发送post请求。我怀疑这是因为病人每秒钟都在倒数。但不是100%确定。在
componentdiddupdate
中发送post请求是个好主意吗

patientInfo = [
            { count: 100, room: "1", name: 'John Nero', timeStamp: '', location: ''},
            { count: 100, room: "2", name: 'Shawn Michael', timeStamp: '', location: ''},
            { count: 100, room: "3", name: 'Gereth Macneil', timeStamp: '', location: ''}
 ]

componentDidMount（）{
this.countDownInterval=setInterval（（）=>{
this.setState（prevState=>({
patientInfo:prevState.patientInfo.map（（患者）=>{
如果（患者位置信息！=''）{
如果（patient.count您应该能够以类似的方式处理它：


函数表（）{
常量[tableData，setTableData]=React.useState([
{
姓名：“约翰·多伊”，
时间戳：“
},
{
姓名：“无名氏”，
时间戳：“
},
{
姓名：“南希·多伊”，
时间戳：“
}
]);
const updateItem=（事件、索引）=>{
让newstate=[…tableData]；
newstate[index].timestamp=（新日期（Date.now（））.toString（）；
警报（`Do POST here:${JSON.stringify（newstate[index]，null，2）}`）；
setTableData（新闻状态）；
};
返回(
病人
时间戳
更新
{tableData.map（（项，索引）=>{
返回(
{item.name}
{item.timestamp}
updateItem（事件、索引）}>
更新
);
})}
);
}
ReactDOM.render（，document.body）；

患者如何获得时间戳？是否有人通过编辑表格手动为患者添加时间戳？@MattOestreich否，当用户单击“患者位置”按钮时，onClick（）会使用位置和时间戳更新患者的状态。它不在UI上，时间戳设置为onClick（）你确定handleAutoObsSubmit没有被调用3次而不是发送3次患者Obj吗？@Jereme我的回答有帮助吗？
handleAutoObsSubmit = () => {

        const postUrl = '/send_patient_that_has_timeStamp';
        const timeStampedPatients = this.state.patientInfo.filter(patient => patient.timeStamp !== '');
        let data = {};

        timeStampedPatients.map((patient) => {

            data = {
                room: patient.room,
                patient: patient.name,
                timestamp: patient.timeStamp,
                location: patient.locationInfo,
            };

        });


        fetch(postUrl, {
            method: 'POST',
            body: JSON.stringify(data),
            headers: {
                'Content-Type': 'application/json'
            }
        })
            .then((res) => {

                if (!res.ok) {
                    console.log('request failed');
                } else {
                    console.log('request sent');
                }
            });
    }

 componentDidUpdate() {
        this.state.patientInfo.map(patient => {
            if (patient.timeStamp !== '') {
                this.handleAutoObsSubmit();
            }
        });
    }


componentDidMount() {
  this.countDownInterval = setInterval(() => {

            this.setState(prevState => ({

                patientInfo: prevState.patientInfo.map((patient) => {
                    if (patient.locationInfo!== '') {

                        if (patient.count <= 0) {
                            clearInterval(this.countDownInterval);
                        }
                        return { ...patient, count: patient.count - 1 };
                    }
                    return patient;
                })
            }));
        }, 1000);
    }