React传入预期有效对象却抛出TypeError：无法读取code属性

问题原因 #

你遇到的核心问题是组件首次渲染时传入的json参数为undefined。虽然后续API返回数据后json.wrapper变成了有效对象，但React的初始渲染已经触发了json.code的读取操作，直接导致报错。

至于控制台能打印出有效值，是因为浏览器控制台的异步特性：它会在对象更新后显示最新状态，而非打印瞬间的快照。如果改成console.log('Wrapper:', JSON.stringify(json.wrapper))，就能看到初始渲染时的真实值（大概率是undefined）。

解决方案 #

以下几种方式都能解决这个问题，按需选择即可：

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

在读取属性时添加可选链，避免undefined触发报错：

export function Wrapper({ json }) {
    console.log('Wrapper:', json)
    return (
        <>
        <div className="label">
            Code:
            <input
                className="editable"
                type="text"
                defaultValue={json?.code}
            />
        </div>
        </>
    )
} 

2. 组件内条件渲染 #

确保json存在后再渲染内容，也可以替换成加载状态组件：

export function Wrapper({ json }) {
    console.log('Wrapper:', json)
    if (!json) return null;
    return (
        <>
        <div className="label">
            Code:
            <input
                className="editable"
                type="text"
                defaultValue={json.code}
            />
        </div>
        </>
    )
} 

3. 给组件参数设置默认值 #

在组件定义时给json设置空对象默认值，避免读取属性时出错：

export function Wrapper({ json = {} }) {
    console.log('Wrapper:', json)
    return (
        <>
        <div className="label">
            Code:
            <input
                className="editable"
                type="text"
                defaultValue={json.code}
            />
        </div>
        </>
    )
} 

4. 父组件条件渲染子组件 #

确保json.wrapper存在后再渲染Wrapper组件：

<div className="label">
  Wrapper:
  {console.log('Wrapper:', json.wrapper)}
  {json.wrapper && <Wrapper json={json.wrapper} />}
</div>

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