axios发送GET请求首次点击按钮无法获取数据，二次点击正常如何解决

• 你代码中获取自定义ID的逻辑存在错误：你使用e.target.dataset来取reamoreid，但e.target是点击事件触发的最内层元素，如果你的.learnMoreId节点内部有子元素（比如内嵌的文字、图标），首次点击时大概率点击到了没有绑定data-reamoreid属性的子元素，此时取到的reamoreid为undefined，请求参数异常导致拉取数据失败；第二次点击如果命中了绑定事件的.learnMoreId元素本身，就能正常拿到ID发起请求。

只需要将获取ID的来源从e.target替换为e.currentTarget即可，e.currentTarget始终指向绑定了点击事件的.learnMoreId元素，无论点击到内部哪个子元素都能正常拿到预设的自定义属性。

修复后完整代码如下：

const learnMores = document.querySelectorAll('.learnMoreId');
const readmoreImg = document.querySelector('#readmoreImg');
const readMoreTitle = document.querySelector('#readMoreTitle');
const readMoresubTitle = document.querySelector('#readMoresubTitle');
const readmoreBody = document.querySelector('#readmoreBody');
learnMores.forEach((learnMore) => {
    learnMore.addEventListener('click', (e) => {
        e.preventDefault();
        if (e.currentTarget) {
            // 唯一修改点：把e.target换成e.currentTarget
            const { reamoreid } = e.currentTarget.dataset;
            // 可选优化：加ID有效性判断，避免无效请求
            if (!reamoreid) return console.warn('未获取到有效readmore ID');
            axios.get(`/single-readmore/${reamoreid}`).then((response) => {
                readmoreImg.src = `/upload/readmore/${response.data.readMoreImage}`;
                readMoreTitle.innerText = response.data.title;
                readMoresubTitle.innerText = response.data.subTitle;
                readmoreBody.innerHTML = response.data.desciption;
            }).catch((error)=>{
                console.log(error);
            })
        }
    });
});

• 你自定义属性名reamoreid存在拼写错误，疑似是readmoreid的笔误，建议统一修正避免后续维护踩坑
• 可以在请求发起前给按钮加加载状态，避免用户重复点击发起多次请求
• 响应数据赋值前可加非空判断，避免接口返回空值导致页面渲染异常

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