React中Array.find()返回ID匹配但数据异常问题排查

核心错误是Array.find()回调函数里的相等判断误写为赋值操作，同时存在类型不匹配的隐患：

1. 你写的匹配逻辑是M => M.id = productId，这里的单等号=是赋值运算符，不是做相等比较的运算符。
2. 执行逻辑：find遍历到数组第一个商品项时，会直接执行M.id = productId，把第一个商品的id属性修改为当前路由获取到的productId值；而赋值表达式本身的返回值就是被赋的productId，属于JavaScript里的真值，直接满足find的匹配条件，find会立刻终止遍历返回第一个元素，根本不会检查后续的商品项。
3. 这就导致不管路由传什么id，返回的永远是被篡改了id属性的第一个商品对象，其他属性自然全是第一个商品的内容。另外你定义的商品数组里id是数字类型，useParams()返回的路由参数默认是字符串类型，直接比较也会出现匹配失败的问题。

import { useParams } from 'react-router-dom'
import Merchandise from './Merchandise文件对应路径'

// 页面业务逻辑部分
const params = useParams()
// 把字符串类型的路由参数转成数字，和商品数组的id类型统一
const productId = Number(params.id)

// 回调里用严格相等===做匹配判断，禁止写单等号
const product = Merchandise.find(item => item.id === productId)
console.log(product)

• 条件判断场景优先使用严格相等运算符===，避免隐式类型转换导致的意外匹配问题
• 单等号=仅用于变量/属性赋值，不要写在条件判断位置，开启ESLint校验的话这类错误会被直接标红提示
• Array.find()会在回调第一次返回真值时立刻终止遍历，不要在find的回调里写有副作用的操作（比如之前代码里的赋值改原数组逻辑）

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