React中Axios Get请求currentUser[0]?.id参数出现undefined问题

需求：通过当前用户的用户名作为参数从API获取数据。

代码实现：

useEffect(()=>{
        console.log(currentUser[0]?.id.toString())
        if (currentUser) {
            console.log(currentUser[0]?.id.toString())
            axios.get(`http://127.0.0.1:8000/get_chat2/?user1=${currentUser[0]?.id.toString()}&user2=`).then(res=>{
                setUsers(res.data)
                console.log(res.data)
            })    
},[currentUser])

问题详情：打印currentUser[0]?.id.toString()能正常输出用户ID，但发起请求时该参数却变为undefined，尝试手动转字符串也无效；换成用户名作为参数则不会出现undefined的情况。

问题根源 #

1. 条件判断if (currentUser)存在漏洞：如果currentUser是空数组（比如初始状态），空数组属于真值，会进入分支，但此时currentUser[0]为undefined，导致currentUser[0]?.id.toString()返回undefined。
2. useEffect会在currentUser状态更新时触发多次，可能在currentUser为空数组的阶段就发起了请求，而你看到的正常打印是后续currentUser有数据时的输出，两者并非同一轮执行。

修复代码 #

useEffect(()=>{
    // 先提取userId，避免重复调用可选链
    const userId = currentUser?.[0]?.id;
    console.log(userId?.toString());
    
    // 确保userId存在再发起请求
    if (userId) {
        console.log(userId.toString());
        axios.get(`http://127.0.0.1:8000/get_chat2/?user1=${userId.toString()}&user2=`).then(res=>{
            setUsers(res.data);
            console.log(res.data);
        });
    }
},[currentUser]);

额外优化建议 #

如果currentUser的初始状态是[]，建议改为null或undefined，这样if (currentUser)就能准确拦截未加载完成的状态，避免无效的执行分支：

// 示例：初始化currentUser的状态
const [currentUser, setCurrentUser] = useState(null);

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