React传递接口返回数组为prop首次打印undefined第二次显示数据如何解决

你给出的静态示例代码本身不会触发该问题，问题出在你实际业务中从API异步获取数据的逻辑：

• React组件渲染为同步执行，父组件首次渲染时API请求尚未返回，你用来传递给子组件的menu状态初始值未设置（或显式设为undefined），因此子组件首次接收的prop自然为undefined
• 待API请求完成，你更新父组件的menu状态触发重渲染，子组件二次渲染才能拿到正确数组值，该现象和是否关闭StrictMode无关联。

1. 父组件状态设置初始默认值 #

父组件定义menu状态时直接指定空数组为初始值，避免子组件接收到undefined：

const [menu, setMenu] = useState([])

该方案可同时避免子组件调用数组方法（如map、filter）时报错。

2. 父组件加条件渲染 #

如果子组件必须拿到有效数据才能正常渲染，可在父组件做渲染拦截：

// 仅当menu存在时才渲染子组件
{menu && <MenuTable menu={menu} />}

3. 子组件内部做prop兜底 #

不需要修改父组件逻辑时，可直接在子组件层面对prop做默认值处理：

// 写法1：参数解构直接指定默认值
const MenuTable = ({menu = []}) => {
  console.log(menu)
  // 业务逻辑
}

// 写法2：组件内用空值合并运算符兜底
const MenuTable = (props) => {
  const menu = props.menu ?? []
  console.log(menu)
  // 业务逻辑
}

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