LWC问题：父组件更新后兄弟组件未重新渲染

我开发了一个作为工具箱的LWC：用户从ToolBelt选择工具后，WorkArea会加载对应工具的业务逻辑。涉及组件包括父组件Toolbox.js、子组件ToolBelt.js、子组件WorkArea.js。

正常流程：父组件将工具选择处理器传递给ToolBelt，ToolBelt触发事件后，父组件的selectedTool变量能成功更新。

异常情况：父组件中selectedTool用@api装饰，子组件WorkArea中用@track装饰，但父组件更新后，WorkArea未重新渲染。

相关组件代码 #

父组件（Toolbox.js） #

import { LightningElement, api } from 'lwc';
export default class Toolbox extends LightningElement {
    @api selectedTool
    @api tools = [redacted] 

    toolSelectionHandler(event){
        let updatedTools
        let selectedTool;
        const id = event.detail.id 
        const action = event.detail.action
        if( action === 'unselect'){
            updatedTools = this.tools.map( (tool) => {
                tool.selected = false
                return tool
            })
            this.selectedTool = null
        } else{
            updatedTools = this.tools.map( (tool) => {
                if(tool.id === id){
                    tool.selected = true
                    selectedTool = tool
                } 
                else {
                    tool.selected = false
                }
                return tool
            })
            this.selectedTool = selectedTool
        }
        this.tools = updatedTools
    }
}

父组件模板（Toolbox.html） #

<template>
    <div class="slds-grid slds-wrap slds-grid--pull-padded">
        <div class="slds-p-horizontal--small slds-size--1-of-2 slds-medium-size--1-of-6 slds-large-size--4-of-12" >
            <c-toolbelt 
                tools={tools}
                ontoolselected={toolSelectionHandler}
            ></c-toolbelt>
        </div>
        <div class="slds-p-horizontal--small slds-size--1-of-2 slds-medium-size--5-of-6 slds-large-size--8-of-12">
            <c-work-area 
                selected-tool={selectedTool}
            >
            </c-work-area>
        </div>
    </div>
</template>

WorkArea组件（WorkArea.js） #

import { LightningElement, track } from 'lwc';

export default class WorkArea extends LightningElement {

    @track selectedTool
    @track isLoading = false


    get tool1(){
        let matchBool
        if(!this.selectedTool){
            matchBool = false
        } else {
            if (this.selectedTool.title = 'tool1') {
                matchBool = true 
            } 
        }
        return matchBool;
    }

    get tool2(){
        let matchBool
        if(!this.selectedTool){
            matchBool = false
        } else {
            if (this.selectedTool.title = 'tool2') {
                matchBool = true 
            } 
        }
        return matchBool;
    }

    get tool3(){ 
        let matchBool
        if(!this.selectedTool){
            matchBool = false
        } else {
            if (this.selectedTool.title = 'tool3') {
                matchBool = true 
            } 
        }
        return matchBool;
    }

    spinnerHandler(){
        this.isLoading = !this.isLoading 
    }
}

WorkArea组件模板（WorkArea.html） #

<template>
    <div class="work-area">
        <div if:true={toolOne} class="tool-detail-area selected">
            <c-tool-one 
                onspinnerhandler={spinnerHandler} >
            </c-tool-one>
        </div> 
        <div if:true={toolTwo} class="tool-detail-area selected">
            <c-tool-two
                onspinnerhandler={spinnerHandler} >
            </c-tool-two>
        </div> 
        <div if:true={toolThree} class="tool-detail-area selected">
            <c-tool-three
                onspinnerhandler={spinnerHandler} >
            </c-tool-three>
        </div> 
        <div if:false={selectedTool} class="tool-detail-area default">
            <c-no-tool-display></c-no-tool-display>
        </div>
        <div if:true={isLoading}>
            <c-loading-spinner></c-loading-spinner>
        </div>          
    </div>
</template>

问题根源与修复方案 #

1. 子组件属性接收错误 #

WorkArea中用@track声明selectedTool，但父组件是通过属性传递该值，LWC中子组件接收外部传入的属性必须用@api装饰器，否则无法绑定父组件的更新。

修复代码：

// WorkArea.js开头修改
import { LightningElement, api, track } from 'lwc';

export default class WorkArea extends LightningElement {
    @api selectedTool // 替换@track为@api
    @track isLoading = false
    // 其余代码不变
}

2. getter方法的条件判断错误 #

所有工具的getter方法中使用了赋值运算符=而非比较运算符===，这会导致逻辑错误（赋值操作成功后会返回被赋的值，导致条件始终为true）。

修复后的getter示例：

get tool1(){
    return this.selectedTool?.title === 'tool1';
}

get tool2(){
    return this.selectedTool?.title === 'tool2';
}

get tool3(){
    return this.selectedTool?.title === 'tool3';
}

利用可选链?.可以简化空值判断，避免额外的if分支。

3. 模板与getter名称不匹配 #

WorkArea模板中使用的toolOne、toolTwo、toolThree与JS中定义的tool1、tool2、tool3名称不一致，导致模板无法正确获取getter返回值。

修复模板代码：

<div if:true={tool1} class="tool-detail-area selected">
    <c-tool-one 
        onspinnerhandler={spinnerHandler} >
    </c-tool-one>
</div> 
<div if:true={tool2} class="tool-detail-area selected">
    <c-tool-two
        onspinnerhandler={spinnerHandler} >
    </c-tool-two>
</div> 
<div if:true={tool3} class="tool-detail-area selected">
    <c-tool-three
        onspinnerhandler={spinnerHandler} >
    </c-tool-three>
</div> 

4. 父组件状态更新优化（可选） #

LWC的响应式系统依赖引用变化，父组件中直接复用数组内的对象可能导致更新检测不灵敏。建议在赋值selectedTool时创建新对象引用：

// 父组件else分支中修改
selectedTool = {...tool}; // 通过解构创建新对象

确保每次selectedTool更新时都是新的引用，提升响应式可靠性。

内容的提问来源于stack exchange，提问作者T. Young