react-router-dom报computedMatch警告及size.height属性读取错误求助

原因 #

computedMatch是react-router-dom v5版本的内部属性，出现该警告的常见原因有两个：

• 代码中存在将react-router注入的路由属性（包括computedMatch、match、location等）直接展开透传给原生DOM元素的操作，原生HTML元素不存在该属性，React会抛出警告。
• 使用的react-router-dom v5版本较旧，和当前React版本存在兼容性问题。

解决方案 #

• 排查所有组件代码，不要将路由相关的全量props直接展开传给<div>、<p>等原生DOM元素，仅传递实际需要的属性。
• 升级react-router-dom版本：可以升级到v5的最新稳定版v5.3.4，或者直接升级到v6版本，v6已经移除了computedMatch内部属性，不会再触发该警告。
• 额外优化提示：你当前App.js中导入了<Switch>组件但没有使用，v5版本下建议将多个<Route>包裹在<Switch>中，避免路由重复匹配。

原因 #

该报错属于状态初始化和判断逻辑的问题：

• 你在Product_Details组件中初始化differentProduct时，错误地将初始值设为了空数组[]，但接口返回的是单个商品对象，而非数组。
• 空数组在JS中属于真值，你写的differentProduct && (...)判断条件在初始渲染时会直接成立，此时数组不存在size属性，differentProduct.size为undefined，访问undefined.height自然会抛出报错。
• 即使你把初始值改为空对象{}，空对象的size属性仍然是undefined，同样会触发报错。

解决方案 #

选择任意一种即可：

1. 修改初始状态值+保留现有判断：
   将状态初始化改为let [differentProduct, setDifferentProduct] = React.useState(null);，null属于假值，初始渲染时不会进入判断逻辑，等接口请求成功赋值为商品对象后再渲染，即可正常访问属性。
2. 不修改初始值，使用可选链做安全访问：
   将渲染代码改为<p>{differentProduct?.size?.height}</p>，可选链会在属性不存在时直接返回undefined，不会抛出报错。

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