React组件传props时items为undefined，无法调用map的问题求助

问题描述 #

我遇到了一个React Router相关的问题：之前主组件通过React Router渲染简单的“hello world”组件完全正常，说明路由配置没问题，但现在传递一个数组到LinksComponent时，一直报错无法读取undefined的map方法。

我的代码如下：
主组件代码：

const items = [{name: 'a'}, {name: 'b'}, {name: 'c'}]
render={() => ( <LinksComponent items={items} />)}

Links组件代码：

const LinksComponent = ({ items }) => (
  <div>
    {items.map((item) => { return <div>{item.name}</div> })}
  </div>
)

肯定是忽略了某个简单细节，想请教下有哪些排查思路？

排查思路 #

这种问题我碰到过好几次，大概率是组件渲染时items初始值为undefined导致的，给你几个一步步排查的方向：

• 检查路由传参的方式是否符合React Router版本要求
  如果你用的是React Router v6，Route组件已经不再支持render属性，必须用element属性传递组件：

  // React Router v6 正确写法
  <Route path="/your-path" element={<LinksComponent items={items} />} />
  

  要是你还在用v5的render写法但升级到了v6，那props根本传不进去，items自然是undefined。

• 给items设置默认值，避免初始undefined报错
  即使你觉得items肯定有值，组件初始化时可能因为路由渲染顺序、异步数据加载等问题，items还没被传递过来。可以给组件props设置默认值：

  const LinksComponent = ({ items = [] }) => (
    <div>
      {items.map((item) => { return <div>{item.name}</div> })}
    </div>
  )
  

  或者用可选链操作符?.做防护：

  {items?.map((item) => { return <div>{item.name}</div> })}
  

  这样既能避免报错，也能快速验证是不是初始值的问题。

• 打印items的值，确认实际传递情况
  在LinksComponent里加个控制台打印，看看实际收到的items是什么：

  const LinksComponent = ({ items }) => {
    console.log('Received items:', items);
    return (
      <div>
        {items?.map((item) => { return <div>{item.name}</div> })}
      </div>
    )
  }
  

  如果控制台输出undefined，那说明主组件的items没正确传过来——比如是不是items变量在主组件里是异步获取的，初始状态设成了undefined？或者有没有拼写错误、作用域问题导致items没被正确引用？

• 确认主组件中items的定义逻辑
  再检查下主组件里的items：如果是异步获取的数据，初始状态应该设为空数组而不是undefined，比如用useState时：

  const [items, setItems] = useState([]);
  // 异步接口请求后再setItems更新数据
  

  另外也要确认items是不是在某个条件块里定义的，导致渲染LinksComponent时items还没被创建。

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