LWC父子组件通信问题：子组件无法获取父组件Apex返回数据

问题原因 #

父组件的@wire调用是异步执行的，而子组件的connectedCallback在组件挂载时立即触发——此时父组件还未从Apex接口拿到数据，currentUserProjects尚未被赋值，因此子组件的@api projects自然返回undefined。

解决方案 #

1. 子组件监听projects属性的更新（推荐） #

通过给@api属性设置getter/setter，在数据传递过来时自动触发逻辑，无需依赖生命周期钩子：

import { LightningElement, api } from 'lwc';

export default class ChildComponent extends LightningElement {
    _projects;

    @api 
    get projects() {
        return this._projects;
    }
    set projects(value) {
        this._projects = value;
        // 数据更新时执行逻辑
        if (value) {
            console.log(this._projects);
            // 这里写需要用到projects的业务代码
        }
    }
}

2. 父组件加条件渲染，确保数据加载完成再渲染子组件 #

在父模板中通过if:true判断，只有当currentUserProjects存在数据时才渲染子组件，这样子组件初始化时就能拿到完整数据：

<template>
    <!-- 仅当数据存在时渲染子组件 -->
    <c-child-component if:true={currentUserProjects} projects={currentUserProjects}></c-child-component>
</template>

父组件JS保持原有逻辑即可：

import { LightningElement, wire } from 'lwc';
import getProjectsForYear from '@salesforce/apex/ProjectController.getProjectsForYear';

export default class ParentComponent extends LightningElement {
    currentUserProjects;

    @wire(getProjectsForYear, { year: 2024 })
    wiredProjects({ error, data }) {
        if (data) {
            this.currentUserProjects = data;
            console.log(this.currentUserProjects);
        } else if (error) {
            // 处理错误逻辑
        }
    }
}

3. 子组件用renderedCallback结合状态判断 #

如果需要在渲染阶段处理数据，可以用renderedCallback，但要加状态变量避免重复执行：

import { LightningElement, api } from 'lwc';

export default class ChildComponent extends LightningElement {
    @api projects;
    hasProcessedData = false;

    renderedCallback() {
        if (this.projects && !this.hasProcessedData) {
            console.log(this.projects);
            // 执行数据相关逻辑
            this.hasProcessedData = true;
        }
    }
}

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