React项目中props数组在组件函数内读取为空但实际非空问题排查

这个问题是典型的React Hooks闭包陷阱，根因出在react-dnd的useDrop钩子用法上：

• 你在调用useDrop时没有传入依赖数组，钩子内部的回调函数只会在组件首次渲染时初始化一次，此时art的初始值是空数组，回调会永久捕获这个初始空值
• 后续你通过接口请求更新art状态后，useDrop的回调没有跟着重新生成，所以addImageToShirt函数里访问到的永远是首次渲染时的空art，filter自然返回空数组
• 热重载会触发组件重新挂载，此时art已经是接口返回的有效值，新初始化的回调就能捕获到正确的art值，所以才会出现修改代码后功能正常的异常表现

给useDrop钩子添加依赖数组，将外部变量art加入依赖列表，这样每次art更新时，useDrop都会重新生成内部回调，捕获最新的art值。
修改Viewer组件中的useDrop代码如下：

const [{isOver}, drop]=useDrop(()=>({
    accept:'div',
    drop:(item)=>addImageToShirt(item.id),
    collect:(monitor)=>({
        isOver: !!monitor.isOver()
    })
// 新增art作为依赖项
}), [art])

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