React中获取点击<li>项的user.id并通过Fetch POST提交的实现问题

API 探路者

2026-10-17

实现方案

第一步：补充缺失的状态定义

当前代码未声明clickeduser对应的状态，先在顶部状态声明部分添加，同时调整原有状态的初始值更匹配数据类型：

// 原username存储的是当前用户ID，为数字类型，不要用数组作为初始值
const [username, setUsername] = useState(null);
const [conversatid, setConversatId] = useState(null);
// 新增存储点击用户ID的状态
const [clickeduser, setClickeduser] = useState(null);

第二步：修正li的点击事件绑定

你定义的alluClicked是接收user参数、返回事件处理函数的高阶函数，绑定时需要把当前遍历的user对象传进去：

<li key={user.id} onClick={alluClicked(user)} className="tumtekkul">
  <a> {user.username} </a>
</li>

第三步：完善点击事件逻辑与提交逻辑

在点击事件中完成状态存储，同时可直接触发提交请求，也可以根据业务需求放到其他触发时机执行：

const alluClicked = user => evt => {
  // 将被点击用户的ID存入状态
  setClickeduser(user.id);
  // 直接调用提交接口，也可以移到其他按钮的点击事件中触发
  convcreate(user.id);
}

// 调整convcreate函数，直接接收传入的目标用户ID，避免状态更新延迟导致的取值异常
const convcreate = (targetUserId) => {
  fetch('http://localhost:8000/api/conversat/', {
    method: 'POST',
    headers: {
      Authorization: `JWT ${localStorage.getItem('token')}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      User1i: username, 
      User2ii: targetUserId
    })
  })
  .then(res => res.json())
  .then(json => {
    setConversatId(json.id);
  });
};