为什么依赖数组为空的useEffect在组件加载时未被调用？

核心问题1：语法错误导致组件渲染失败 #

你提供的代码里存在一处JSX语法错误，会直接导致组件无法正常渲染，进而useEffect不会执行：
在Modal.Footer的三元判断中，isEdit == false后缺少三元运算符的?标识，修正后代码如下：

<Modal.Footer>
    {isEdit == false ?
        <>
            <Button variant="secondary" className="btn btnedit" onClick={handleClose}>Cancel</Button>
            <Button variant="primary" onClick={addUser}>Add User</Button>
        </>
        :
        <>
            <Button variant="primary" className="btn btnremove" onClick={removeUser}>Remove User</Button>
            <Button variant="primary" className="btn btnedit">Reset User</Button>
            <Button variant="primary" onClick={updateUser}>Save</Button>
        </>
    }
</Modal.Footer>

核心问题2：useEffect内状态异步更新导致请求参数错误 #

即便修复语法错误后，你也可能误以为useEffect没触发，实际是请求参数不符合预期：
React的setState是异步更新的，你在useEffect内执行setRole(Cookies.get('role'))后，当前渲染周期内的role状态还是初始的空字符串，导致请求携带的user_id为空，接口无法返回预期结果。
修正后的useEffect代码如下：

useEffect(() => {
    // 加日志可直接在控制台确认useEffect是否执行
    console.log('useEffect已触发')
    const token = Cookies.get('token');
    // 直接从Cookie取值使用，不依赖异步更新的state
    const roleFromCookie = Cookies.get('role');
    setRole(roleFromCookie);
    fetch(`${process.env.API_URL}/user/user-details`, {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify({
            "user_id": roleFromCookie,
            "language": "en",
            "api_token": token
        })
    })
        .then((user) => user.json())
        .then((thisUserData) => {
            console.log('接口返回结果：', thisUserData)
            if (thisUserData.status_code == 200) {
                setThisUser(thisUserData)
            }
        })
        // 新增错误捕获，排查网络或接口报错
        .catch(err => console.error('请求报错：', err))
}, [])

其他优化点 #

你在模板中判断role.indexOf('admin') > -1时，建议增加空值判断，避免role为undefined时报错，修改为：

{role?.indexOf('admin') > -1 ?
    <button className="btn btnedit" onClick={handleShow}>Add Sub-Admin</button>
    : ''}

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