React对象类型state默认值最佳实践：避免子组件渲染错误

在你遇到的场景中，父组件初始状态设为空对象导致子组件首次渲染判断失效，用Object.keys遍历又有性能开销，这里有几个更优的解决方案：

1. 用null/undefined作为初始状态 #

直接从根源解决空对象的真值问题，把父组件的初始状态设为null或undefined，这样子组件里的短路判断就能正常工作：

const App = () => {
    const [value, setValue] = useState(null) // 替换空对象为null
    useEffect(() => {
        const fetchData = async () => {
            const response = await api.get(/* 你的接口地址 */);
            setValue(response);
        };
        fetchData();
    }, []); // 空依赖数组确保只请求一次
    return <Child value={value}/>
}

const Child = ({value}) => {
    // value为null时短路，不会执行后续渲染逻辑
    return value ? <div>{value.targetProperty}</div> : null;
}

这个方案没有额外性能开销，逻辑最直观，是最常用的处理方式。

2. 判断对象的特定必填属性 #

如果接口返回的对象必然包含某个核心属性（比如id、userId这类业务必填字段），直接判断该属性是否存在，比遍历所有键值对高效得多：

const Child = ({value}) => {
    // 假设接口返回的对象一定包含id字段
    return value.id ? <div>{value.id}</div> : null;
}

这种方式精准命中业务逻辑，性能最优，因为只是简单的属性访问判断。

3. 用可选链+空值合并简化代码 #

如果需要直接渲染对象的属性，可以用ES2020引入的可选链?.和空值合并??，既避免报错又简化代码：

const Child = ({value}) => {
    // 若value为空对象或null，会显示默认值，不会报错
    return <div>{value?.targetProperty ?? '暂无数据'}</div>;
}

这种写法不需要额外的条件分支，代码更简洁，也没有性能损耗。

补充：为什么不推荐Object.keys？ #

Object.keys会遍历对象的所有可枚举自有属性，当对象属性较多时会产生不必要的性能开销，而上面的方案要么从状态根源避免问题，要么直接针对业务核心字段判断，效率更高。

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