React组件传参后find方法无法匹配数据问题求助

代码情况 #

App.js 代码 #

const [data, setData] = useState<CarType[]>([])
<Route exact path="/carDetails/:id">
  <CarDetails data={data} />
</Route>

CarDetails.js 代码 #

const CarDetails = (data=[]) => {
  const [item, setItem] = useState<CarType>({} as CarType)

  const { id } = useParams<{ id: string }>()
  useEffect(() => {
    const found = data.find((item) => item.id === id)
    if (found) {
      setItem(found)
    }
    console.log(data, 'data', found, 'found')
    
  }, [data, id])
}

问题现象 #

控制台打印显示data数组存在有效数据，但found始终为undefined，无法匹配到对应id的项。

原因及解决方案 #

1. 组件参数接收错误 #

当前CarDetails组件的参数写法错误，React组件的参数是一个props对象，而非直接接收单个prop。正确的接收方式应该解构props中的data：

const CarDetails = ({ data = [] }) => {
  // 其余代码不变
}

如果不解构，data会被赋值为整个props对象，而非传递的数组，自然无法用find方法找到数据。

2. ID类型不匹配 #

路由参数id默认是字符串类型，而如果data数组中item的id是数字类型，用全等运算符===比较时，类型不同会导致匹配失败。可以将路由参数转为数字后再比较：

const found = data.find((item) => item.id === Number(id))

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