React项目中按钮点击有时返回undefined的问题排查

核心原因：事件目标元素不固定 #

你点击删除按钮时，e.target指向的是实际被点击的DOM元素：

• 当点击到按钮内部的<FontAwesomeIcon>图标时，e.target是这个图标元素，它没有value属性，所以打印出undefined
• 当点击按钮的空白区域时，e.target才是按钮本身，能正确读取到value={pic.SNO}的值

这就是为什么有时候输出正确sno，有时候输出undefined的根本原因。

次要问题：直接修改React状态数组 #

代码里的images.shift()是直接修改了useState创建的状态数组，这违反了React的状态不可变原则。正确的做法应该是在设置状态时处理数组，比如在fetchImages里：

async function fetchImages() {
    const result = await Instance.get('/photos/getImages');
    // 移除第一个元素后再设置状态
    setImages(result.data.slice(1));
}

直接修改状态数组可能导致组件渲染异常，虽然这不是当前点击问题的直接原因，但也是需要修复的代码问题。

解决方案 #

方案1：使用e.currentTarget替代e.target #

currentTarget始终指向绑定事件的元素（也就是按钮），不管点击的是按钮内部的哪个子元素：

const handleDelete = async (e) => {
    console.log(e.currentTarget.value); 
}

方案2：直接传递sno参数，不用事件对象 #

更简洁的方式是在调用handleDelete时直接传入pic.SNO，避免依赖事件对象：

// 按钮的onClick修改为
<button value={pic.SNO} className="btn text-danger" onClick={()=>handleDelete(pic.SNO)}>
    <FontAwesomeIcon icon={faTrash} />
</button>

// handleDelete函数修改为
const handleDelete = async (sno) => {
    console.log(sno); 
}

这样不管点击按钮的哪个部分，都能正确拿到对应的sno值。

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