如何在循环中将item.id传入Payload，实现特定职位评论存储

核心问题 #

你需要将循环渲染的每个职位的item.id关联到评论提交的Payload中，确保评论能正确存储到对应职位的关联表中。

解决方案 #

以下是两种直接可行的修改方式，同时解决循环中多个评论框的状态冲突问题：

方法1：通过闭包传递item.id到提交函数

1. 重构状态管理：将单个评论输入状态改为对象，存储每个职位对应的评论内容，避免多个输入框互相干扰

// 替换原来的textareaValue状态
const [commentTexts, setCommentTexts] = useState({})

// 修改输入变更处理函数，关联item.id
const handleTextareaChange = (e, itemId) => {
  setCommentTexts(prev => ({
    ...prev,
    [itemId]: e.target.value
  }))
}

2. 修改提交函数，接收item.id参数

const handleSubmit = (e, itemId) => {
  e.preventDefault()
  // 构造包含item.id的Payload
  const payload = {
    comment: commentTexts[itemId] || '',
    user: currentUser.id,
    post_id: itemId // 这里添加职位ID，对应你的comment表关联字段
  }
  console.log(payload)
  // 提交后清空当前职位的评论输入
  setCommentTexts(prev => ({
    ...prev,
    [itemId]: ''
  }))
}

3. 更新Form和提交按钮的事件绑定

// 循环中的Form组件修改如下
<Form onSubmit={(e) => handleSubmit(e, item.id)} type="submit">
  <InputGroup className="mb-3 comment-sect">
    <InputGroup.Text id="inputGroup-sizing-default">
      <Image src={asset('small', currentUser.profil_picture)} rounded className="profil-comment" />
    </InputGroup.Text>

    <Form.Control
      as="textarea"
      rows={1}
      onChange={(e) => handleTextareaChange(e, item.id)}
      value={commentTexts[item.id] || ''}
      aria-label="Default"
      aria-describedby="inputGroup-sizing-default"
    />
    <div
      className={`comment-send-container ${(commentTexts[item.id] || '').trim() !== '' ? 'active-icon' : 'disable-icon'}`}
      onClick={(e) => handleSubmit(e, item.id)}
    >
      <FontAwesomeIcon icon={faPaperPlane} className="comment-send-icon" />
    </div>
  </InputGroup>
</Form>

方法2：使用隐藏表单字段存储item.id

如果不想修改事件绑定方式，可以在Form中添加隐藏字段存储当前职位的item.id，提交时从表单中获取：

1. 添加隐藏字段

<Form onSubmit={handleSubmit} type="submit">
  {/* 添加隐藏字段存储item.id */}
  <input type="hidden" name="post_id" value={item.id} />
  
  {/* 其余Form内容不变，仅修改handleSubmit */}
  <InputGroup className="mb-3 comment-sect">
    {/* ...原有内容... */}
  </InputGroup>
</Form>

2. 修改handleSubmit获取隐藏字段值

const handleSubmit = (e) => {
  e.preventDefault()
  // 从表单中获取item.id
  const postId = e.target.post_id.value
  const payload = {
    comment: textareaValue,
    user: currentUser.id,
    post_id: postId
  }
  console.log(payload)
}

注意：这种方式如果是循环渲染多个Form，需要确保每个评论框的状态独立（参考方法1的状态对象管理），否则多个输入框会共享同一个textareaValue。

内容的提问来源于stack exchange，提问作者moussa