如何在循环中传递 job.id 到 Payload 以存储评论

霞舞

发布时间：2025-08-23 18:46:25

544人浏览过

来源于php中文网

原创

如何在循环中传递 job.id 到 Payload 以存储评论

在循环渲染的 Job 列表中，用户针对特定 Job 发表评论时，需要将该 Job 的 `id` 传递到 Payload 中，以便将评论正确关联到对应的 Job。以下将提供修改后的代码示例，并解释如何获取 `item` 对象，从而访问 `item.id` 并将其添加到 Payload 中。 **修改 Form 组件的 onSubmit 事件** 首先，需要修改 `

handleSubmit(e, item)} type="submit">

这样，在 handlesubmit 函数中就可以访问到当前 job 的 item 对象。

修改 handleSubmit 函数

接下来，修改 handleSubmit 函数，使其接收 item 作为参数，并从中提取 id 值添加到 Payload 中。

const handleSubmit = (e, item) => {
  e.preventDefault();
  const payload = {
    jobId: item.id, // 将 item.id 添加到 payload 中
    comment: textareaValue,
    user: currentUser.id,
  };
  console.log(payload);

  // 在这里添加发送 Payload 到后端的代码
};

在上述代码中，item 对象包含了当前 Job 的所有信息，包括 id。通过 item.id 可以获取到当前 Job 的 ID，并将其添加到 Payload 中，键名为 jobId。请根据你的后端 API 设计修改键名。

注意事项

知鹿匠

知鹿匠教师AI工具，新课标教案_AI课件PPT_作业批改

下载

确保 item 对象在循环中正确传递给组件。
根据你的后端 API 设计，修改 Payload 中 jobId 的键名。
在 handleSubmit 函数中，添加将 Payload 发送到后端 API 的代码，以保存评论。

完整代码示例

import React, { useState } from 'react';
import { Form, InputGroup, Image } from 'react-bootstrap';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faPaperPlane } from '@fortawesome/free-solid-svg-icons';

const JobCommentForm = ({ item, currentUser, asset, time }) => {
  const [textareaValue, setTextareaValue] = useState('');

  const handleTextareaChange = (e) => {
    setTextareaValue(e.target.value);
  };

  const handleSubmit = (e, item) => {
    e.preventDefault();
    const payload = {
      jobId: item.id,
      comment: textareaValue,
      user: currentUser.id,
    };
    console.log(payload);

    // 在这里添加发送 Payload 到后端的代码
  };

  return (
     handleSubmit(e, item)} type="submit">
      
        
          
        

        
         handleSubmit(e, item)} // 确保点击事件也传递 item
        >
          
        
      
    
  );
};

export default JobCommentForm;

总结

通过将 item 对象传递给 handleSubmit 函数，可以方便地获取到当前 Job 的 id，并将其添加到 Payload 中。确保在循环中正确传递 item 对象，并根据你的后端 API 设计修改 Payload 的结构。最后，添加发送 Payload 到后端 API 的代码，以保存评论。

Vue Router 与 Bootstrap 折叠导航栏冲突的解决方案

Vue Router 与 Bootstrap 折叠组件冲突的解决方案

如何使用 Ajax 动态填充多个 HTML 标签页中的下拉选项

响应式导航切换：同步 Bootstrap 选项卡与手风琴的激活状态

Bootstrap 5 瀑布流布局中保持滚动位置的完整解决方案

相关标签:

bootstrap ai 点击事件循环对象事件

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：React 组件无限重渲染问题排查与解决方案下一篇：如何在循环中将job.id传递到payload以存储评论

作者最新文章

如何在 Go 中从 Redis 列表类型键安全获取所有元素

2026-01-29 15:45