React组件为何先返回再执行useEffect？customer未定义报错怎么解决

问题原因 #

你判断的完全正确，问题根源就是组件的执行逻辑：

• 组件首次渲染时，useState()没传初始值，所以customer默认是undefined。
• useEffect属于渲染后执行的钩子，里面的异步请求要等组件首次渲染完成才会触发，这时候return里的代码已经跑完了，直接访问customer.first_name自然会报“undefined”错误。
• 另外还有个隐藏问题：如果请求失败，customer会一直保持undefined，同样会触发报错。

解决方法 #

下面是几种实用的处理方案，按需选择：

1. 给customer设置初始空对象 #

在useState初始化时传入空对象，避免首次渲染时customer为undefined：

export default function ViewCustomer() {
    // 初始化空对象，消除首次渲染的undefined状态
    const [customer, setCustomer] = useState({});
    const {id} = useParams();

    useEffect(() => {
        CustomerService.getCustomerById(id).then(res => {
            setCustomer(res.data);
        });
    }, [id]);

    return (
        <div>
           {/* 用||处理属性为空的情况 */}
           {customer.first_name || ''}
        </div>
    );
}

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

用?.安全访问属性，当customer为undefined时不会报错，还能配合??设置默认显示内容：

export default function ViewCustomer() {
    const [customer, setCustomer] = useState();
    const {id} = useParams();

    useEffect(() => {
        CustomerService.getCustomerById(id).then(res => {
            setCustomer(res.data);
        });
    }, [id]);

    return (
        <div>
           {/* 可选链+空值合并，优雅处理未加载/无数据情况 */}
           {customer?.first_name ?? '加载中...'}
        </div>
    );
}

3. 条件渲染，先判断再渲染 #

先检查customer是否存在，不存在时显示加载占位，存在后再渲染真实内容：

export default function ViewCustomer() {
    const [customer, setCustomer] = useState();
    const {id} = useParams();

    useEffect(() => {
        CustomerService.getCustomerById(id).then(res => {
            setCustomer(res.data);
        });
    }, [id]);

    // 未加载完成时显示占位
    if (!customer) {
        return <div>加载中...</div>;
    }

    return (
        <div>
           {customer.first_name}
        </div>
    );
}

4. 加上错误处理 #

如果请求可能失败，可以添加错误状态，让用户知道出了问题：

export default function ViewCustomer() {
    const [customer, setCustomer] = useState();
    const [errorMsg, setErrorMsg] = useState(null);
    const {id} = useParams();

    useEffect(() => {
        CustomerService.getCustomerById(id)
            .then(res => {
                setCustomer(res.data);
                setErrorMsg(null);
            })
            .catch(err => {
                setErrorMsg('获取客户信息失败，请稍后重试');
                setCustomer(null);
            });
    }, [id]);

    // 显示错误信息
    if (errorMsg) {
        return <div>{errorMsg}</div>;
    }

    // 显示加载状态
    if (!customer) {
        return <div>加载中...</div>;
    }

    return (
        <div>
           {customer.first_name}
        </div>
    );
}

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