React+MongoDB表单提交：用户名初始值无法存入数据库求助

你的核心问题是输入框值与状态未双向绑定，且错误遍历了所有用户渲染输入框，导致提交时状态nme为空。以下是具体修复步骤：

1. 同步初始化状态与登录用户信息 #

修改getUser函数，在获取用户数据后，将当前登录用户的用户名赋值给nme状态（需确保接口返回的是当前登录用户，或从用户列表中筛选出登录用户）：

const getUser = () => {
  axios.get('/api/users')
  .then((response) => {
    // 假设接口返回当前登录用户；若返回所有用户，需筛选：
    // const currentUser = response.data.find(user => user.isLoggedIn);
    const currentUser = response.data;
    setUsers(response.data);
    // 初始化状态为登录用户的用户名
    setNme(currentUser.username);
  })
};

2. 修正输入框的双向绑定逻辑 #

让输入框的value绑定状态nme，而非直接绑定user.username，确保状态与输入框值始终同步，同时只渲染当前登录用户的输入框：

<form onSubmit={handleSubmit}>
  {users.length > 0 && (
    <span>
      <input 
        onChange={event => setNme(event.target.value)}                             
        type="text"
        value={nme}
      />             
    </span>                      
  )}               
  <button> Post </button>                   
</form>

3. 提交时使用状态值存入数据库 #

确保handleSubmit函数使用nme状态提交数据到usersPost集合：

const handleSubmit = (e) => {
  e.preventDefault();
  // 提交用户名到usersPost集合
  axios.post('/api/usersPost', { username: nme })
    .then(res => {
      console.log('提交成功', res.data);
      // 可添加后续逻辑，如重置状态或页面跳转
    })
    .catch(err => {
      console.error('提交失败', err);
    });
};

额外优化（可选） #

如果不希望用户修改用户名，可直接静态展示或禁用输入框，提交时直接使用登录用户的原始用户名：

<form onSubmit={handleSubmit}>
  {users.length > 0 && (
    <span>
      {/* 静态展示方式 */}
      <span>{currentUser.username}</span>
      {/* 或禁用输入框 */}
      <input 
        type="text"
        value={nme}
        disabled
      />             
    </span>                      
  )}               
  <button> Post </button>                   
</form>

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