React Router 中遇到的 “Cannot read property 'key' of undefined” 问题-JavaScript中文网-JavaScript教程资源分享门户

问题背景

在使用 React Router 进行页面跳转的过程中，我们有时会遇到下面这个错误：

Uncaught TypeError: Cannot read property 'key' of undefined

这个错误通常发生在使用 map() 函数循环渲染 Link 组件时，例如下面的代码：

{data.map(item => 
  <Link to={`/detail?id=${item.id}`} key={item.id}>
    {item.title}
  </Link>
)}

这个错误会导致页面渲染中断，无法正常跳转。

解决方案

这个错误的解决方案其实很简单，直接为 Link 组件的 key 属性提供一个固定的值即可，例如：

{data.map(item => 
  <Link to={`/detail?id=${item.id}`} key={`link_${item.id}`}>
    {item.title}
  </Link>
)}

或者使用数组的下标作为 key 值：

{data.map((item, index) => 
  <Link to={`/detail?id=${item.id}`} key={index}>
    {item.title}
  </Link>
)}

在 React 中，每个组件都需要有一个唯一的 key 属性，用于区分不同的组件实例，保证组件在更新时能够正确地识别不同的组件并进行更新。

当我们使用 map() 函数循环渲染组件时，React 会自动为每个组件生成一个默认的 key 属性，但有时默认的 key 不能满足我们的需求，需要我们自己提供一个合适的值。

总结

遇到 “Cannot read property 'key' of undefined” 问题时，可以通过为组件的 key 属性提供一个固定的值或使用数组下标作为 key 值来解决。同时，我们也要注意为组件提供唯一的 key 值，保证 React 能够正确地识别组件并进行更新。

示例代码

-- -------------------- ---- -------
------ ----- ---- --------
------ - ---- - ---- -------------------

----- ---- - -
  - --- -- ------ ----- --
  - --- -- ------ ----- --
  - --- -- ------ ----- --
--

----- ----------- - -- -- -
  ------ -
    -----
      ---------------- ------ -- 
        ----- ---------------------------- ------------
          ------------
        -------
      --
    ------
  --
--

------ ------- ------------

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6465d164968c7c53b067a9e8