调查应用开发：如何根据数据库已有用户回答隐藏对应问题模块

嘿，这个需求我之前做类似的团队调查项目时也碰到过，给你梳理几个可行的思路和代码参考，应该能帮你解决问题：

页面加载时先从后端获取已提交回答的用户ID列表，然后遍历页面上的用户回答区块，对比用户ID：如果该用户已提交过回答，就根据需求隐藏整个用户区块，或者只隐藏问题部分。

1. 后端准备接口 #

先写一个简单的接口，返回所有已经提交过回答的用户ID数组，比如：

// 示例Node.js/Express接口
app.get('/api/submitted-users', async (req, res) => {
  try {
    // 从数据库查询已提交回答的用户ID
    const submittedUsers = await SurveyAnswer.distinct('userId');
    res.json(submittedUsers);
  } catch (err) {
    res.status(500).json({ error: '获取已提交用户列表失败' });
  }
});

2. 前端处理逻辑 #

根据你用的技术栈，分两种常见情况给出示例：

原生JavaScript实现 #

假设你的表单结构是这样的：

<!-- 每个用户的回答区块 -->
<div class="user-survey-block" data-user-id="user1">
  <div class="user-info">
    UserId: user1 | UserName: 张三
  </div>
  <div class="survey-questions">
    <div>Question1: <input type="text" name="user1_q1"></div>
    <div>Question2: <input type="text" name="user1_q2"></div>
    <div>Question3: <input type="text" name="user1_q3"></div>
  </div>
</div>

<div class="user-survey-block" data-user-id="user2">
  <!-- 同上结构 -->
</div>

然后写前端逻辑：

document.addEventListener('DOMContentLoaded', async function() {
  try {
    // 调用后端接口拿到已提交用户ID列表
    const response = await fetch('/api/submitted-users');
    const submittedUserIds = await response.json();

    // 遍历所有用户区块
    const userBlocks = document.querySelectorAll('.user-survey-block');
    userBlocks.forEach(block => {
      const userId = block.dataset.userId;
      if (submittedUserIds.includes(userId)) {
        // 选项1：隐藏整个用户区块
        // block.style.display = 'none';

        // 选项2：只隐藏问题，保留用户信息并添加提示
        const questionsSection = block.querySelector('.survey-questions');
        if (questionsSection) {
          questionsSection.style.display = 'none';
          const hint = document.createElement('p');
          hint.textContent = '✅ 该用户已提交过回答';
          hint.style.color = '#52c41a';
          block.appendChild(hint);
        }
      }
    });
  } catch (error) {
    console.error('加载已提交用户列表出错:', error);
  }
});

React框架实现 #

如果是用React开发，渲染时直接判断会更高效：

import { useEffect, useState } from 'react';

function TeamSurveyForm() {
  const [submittedUserIds, setSubmittedUserIds] = useState([]);
  // 假设从后端获取的团队用户列表
  const teamUsers = [
    { userId: 'user1', userName: '张三' },
    { userId: 'user2', userName: '李四' },
    // ...其他团队成员
  ];

  // 页面加载时获取已提交用户
  useEffect(() => {
    async function fetchSubmittedUsers() {
      const res = await fetch('/api/submitted-users');
      const data = await res.json();
      setSubmittedUserIds(data);
    }
    fetchSubmittedUsers();
  }, []);

  return (
    <div className="survey-container">
      {teamUsers.map(user => (
        <div key={user.userId} className="user-block">
          <div className="user-header">
            {user.userName} (ID: {user.userId})
          </div>
          {!submittedUserIds.includes(user.userId) ? (
            <div className="questions">
              <div>Question1: <input type="text" name={`${user.userId}_q1`} /></div>
              <div>Question2: <input type="text" name={`${user.userId}_q2`} /></div>
              <div>Question3: <input type="text" name={`${user.userId}_q3`} /></div>
            </div>
          ) : (
            <p className="submitted-hint">已提交回答，无需重复填写</p>
          )}
        </div>
      ))}
    </div>
  );
}

export default TeamSurveyForm;

• 确保后端返回的用户ID和前端表单里的UserId完全匹配（比如大小写、格式一致），避免匹配失败
• 如果是动态渲染表单（比如从后端拉取用户和问题），建议在渲染阶段直接判断，比事后遍历DOM更高效
• 可以给已提交的区块加一些样式提示（比如灰色背景、对勾图标），比单纯隐藏更友好

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