ReactJS自定义控件无法访问对象参数问题求助

问题场景 #

尝试向自定义控件传递对象类型数据，控制台能打印出完整对象，但访问其属性时抛出TypeError: Cannot read properties of undefined (reading 'text')；传递字符串类型数据则无此问题。相关代码如下：

调用代码 #

<CustomControl initialValue={countries[0]} />

可正常运行的组件代码 #

function CustomControl({initialValue}) {
  console.log(initialValue);
}

控制台输出：

{key: 520728, text: 'UK'}

运行失败的组件代码 #

function CustomControl({initialValue}) {
  console.log(initialValue.text);
}

控制台报错：

TypeError: Cannot read properties of undefined (reading 'text')

核心原因 #

组件首次渲染时initialValue是undefined，但浏览器的console.log有特殊特性：打印引用类型（如对象）时，会显示该对象的最新状态，而非打印瞬间的值。你看到的控制台输出是后续数据加载完成后的对象，但组件首次执行initialValue.text时，initialValue仍为undefined，因此触发报错。

传递字符串无问题，通常是因为字符串数据是同步加载的，组件渲染时已存在有效值，不会出现undefined的情况。

解决思路与方案 #

1. 使用可选链操作符（推荐） #

在访问属性时添加?.，当initialValue为undefined或null时，表达式会返回undefined而非报错：

function CustomControl({initialValue}) {
  console.log(initialValue?.text);
}

2. 添加条件判断 #

在访问属性前先校验initialValue是否存在：

function CustomControl({initialValue}) {
  if (initialValue) {
    console.log(initialValue.text);
  }
  // 或用三元表达式处理无值场景
  console.log(initialValue ? initialValue.text : '暂无数据');
}

3. 解构时设置默认值 #

给initialValue设置默认空对象，避免首次渲染时为undefined：

function CustomControl({initialValue = {}}) {
  console.log(initialValue.text); // 此时访问空对象的text会返回undefined，但不会报错
}

4. 确保数据就绪后再渲染组件 #

如果countries是异步获取的数据（如API请求结果），需等数据加载完成后再渲染CustomControl：

// 假设countries是React状态变量
if (!countries.length) {
  return <div>加载中...</div>;
}
return <CustomControl initialValue={countries[0]} />;

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