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

修改handlesubmit函数

接下来，修改handleSubmit函数，使其接收event对象和item对象作为参数。在函数内部，从item对象中获取id，并将其添加到payload中。

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

  // 在此处添加发送payload到后端的代码
  // 例如：
  // fetch('/api/comments', {
  //   method: 'POST',
  //   headers: {
  //     'Content-Type': 'application/json',
  //   },
  //   body: JSON.stringify(payload),
  // })
  // .then(response => response.json())
  // .then(data => {
  //   console.log('Success:', data);
  // })
  // .catch((error) => {
  //   console.error('Error:', error);
  // });
};

完整代码示例

以下是包含上述修改的完整代码示例：

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 CommentForm = ({ 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, // 将jobId添加到payload
      comment: textareaValue,
      user: currentUser.id,
    };
    console.log(payload);

    // 在此处添加发送payload到后端的代码
    // 例如：
    // fetch('/api/comments', {
    //   method: 'POST',
    //   headers: {
    //     'Content-Type': 'application/json',
    //   },
    //   body: JSON.stringify(payload),
    // })
    // .then(response => response.json())
    // .then(data => {
    //   console.log('Success:', data);
    // })
    // .catch((error) => {
    //   console.error('Error:', error);
    // });

    // 清空textarea
    setTextareaValue('');
  };

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

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

export default CommentForm;

注意事项

CodeSquire

AI代码编写助手，把你的想法变成代码

下载

• 确保item对象包含id属性，并且该属性的值是正确的job ID。
• 在handleSubmit函数中，需要添加将payload发送到后端API的代码。请根据实际情况修改代码，确保能够正确地将评论数据存储到数据库中。
• 在发送payload到后端之前，可以对textareaValue进行验证，例如检查是否为空或是否包含恶意代码。

总结

通过以上步骤，我们成功地将job ID从循环传递到payload中，从而实现了评论与特定job的关联。这种方法可以应用于各种需要将循环数据传递到事件处理函数中的场景。记住要根据你的具体需求调整代码，并确保在生产环境中进行充分的测试。