React删除推文功能异常：点击删除为何所有推文都被移除？

涉及对比代码 #

会清空所有推文的异常代码 #

const deleteTweet = () =>{
    setTweets(tweets.filter(tweet => tweet !== tweet))
}

仅删除目标推文的正常代码 #

const deleteTweet = () =>{
    setTweets(tweets.filter(t => t !== tweet))
}

差异原因 #

两者的核心区别是变量遮蔽（变量名冲突）：

1. 异常代码中，filter回调的参数命名为tweet，这个变量属于回调的局部作用域，会覆盖上层作用域中作为prop传入的待删除目标tweet。此时判断逻辑tweet !== tweet等价于「当前遍历到的元素不等于自身」，除了NaN之外所有JS值和自身做不全等比较都会返回false。filter方法只会保留返回true的元素，因此最终得到空数组，所有推文都会被清空。
2. 正常代码中，filter回调的参数命名为t，和上层待删除的目标tweet没有命名冲突，判断逻辑为「当前遍历到的元素不等于待删除的目标推文」，过滤后只会移除匹配到的目标元素，其余推文全部保留，因此只有点击的对应推文会被删除。

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