React Dropdown组件为何需将传入数据赋值给变量才能渲染？

我是React新手，最近碰到个问题——Dropdown组件没法直接渲染传入的data数据。我的组件代码是这样的：

function PackageSelection({data, switchPackage}) {
  const items = data
  return (
    <Space direction="vertical" size={16}>
      <Dropdown
        menu={{
          items,
        }}
        trigger={['click']}
        arrow={{pointAtCenter: true}}
      >
      </Dropdown>
    </Space>
  )
}

如果删掉const items = data这行，直接把menu里的items写成items: data，组件就渲染失败，想知道为啥。

传入的data数据是：

[
    {
        "key": "official",
        "type": "group",
        "label": "official item",
        "children": [
            {
                "key": "01.00.00.01_official",
                "label": "01.00.00.01"
            },
            {
                "key": "01.00.00.02_official",
                "label": "01.00.00.02"
            }
        ]
    }
]

可能的原因及排查方向 #

1. props.data的初始值异常

如果父组件渲染PackageSelection时，一开始传入的data是undefined或null（比如异步请求数据还没返回的时候），直接写menu={{ items: data }}会让Dropdown的menu.items接收到无效值，触发渲染报错。而虽然const items = data看起来和直接用data没区别，但如果后续父组件更新data为有效数组，两种写法理论上都会正常工作——你可以检查下父组件中data的初始化逻辑，看是否存在初始值为无效状态的情况。

2. Ant Design Dropdown的内部引用处理

部分版本的Ant Design Dropdown会对menu对象的引用做缓存优化。如果每次组件渲染都直接创建{ items: data }这个新对象（相当于menu的引用每次都变），可能会触发组件内部的异常逻辑。你可以尝试把data拷贝一份再传入，比如写成menu={{ items: [...data] }}，看看是否能解决问题，这能验证是不是引用导致的问题。

3. 遗漏Dropdown触发元素

你的代码里Dropdown标签是空的，没有任何可点击的子元素（比如按钮、文本），这会导致下拉菜单根本无法被唤起，这可能也是你觉得“渲染失败”的原因之一。正常用法应该给Dropdown加个触发元素，比如：

<Dropdown ...>
  <span style={{cursor: 'pointer'}}>选择套餐</span>
</Dropdown>

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