React Native：兄弟组件状态变化时下拉选择组件不更新问题

针对你遇到的第二个下拉框无法更新数据的问题，核心要解决状态更新逻辑错误、this上下文绑定以及第三方组件的渲染触发机制这几个关键点，具体修复方案如下：

1. 修正状态更新与this绑定问题 #

setState 本身不返回Promise，不能直接用await调用；同时回调方法如果不绑定this，会导致上下文丢失，无法正确更新组件状态。

修正后的完整代码 #

import React from 'react';
import { View } from 'react-native';
import DropDownPicker from 'react-native-dropdown-picker';

class Form extends React.Component {
    constructor(props){
        super(props)
        this.siteDropdownData = [...]; // 你的站点初始化数据
        this.state = {
            siteSelected: null,
            buildingDropdownData: []
        }
        // 绑定this到回调方法，避免上下文丢失
        this.siteUpdated = this.siteUpdated.bind(this);
        this.updateBuildingDropdownData = this.updateBuildingDropdownData.bind(this);
    }

    siteUpdated(site) {
        // 使用setState的回调函数，确保站点选中状态更新后再加载建筑数据
        this.setState({siteSelected: site}, async () => {
            await this.updateBuildingDropdownData();
        });
    }

    async updateBuildingDropdownData() {
        // 替换为你的实际建筑数据获取逻辑（比如接口请求、本地数据匹配）
        const dropdownData = await getBuildingListBySite(this.state.siteSelected);
        // 更新建筑下拉数据
        this.setState({buildingDropdownData: dropdownData});
    }

    render() {
        return (
            <View>
                <DropDownPicker
                    items={this.siteDropdownData}
                    onSelectItem={(item) => this.siteUpdated(item)}
                    placeholder="选择站点"
                    // 其他自定义属性（比如样式、zIndex等）
                />
                
                {this.state.siteSelected != null &&
                    <DropDownPicker
                        items={this.state.buildingDropdownData}
                        placeholder="选择建筑"
                        // 关键：通过key值强制组件重新渲染，确保新数据生效
                        key={`building-dropdown-${this.state.siteSelected.value}`}
                        // 其他自定义属性
                    />
                }
            </View>
        );
    }
}

// 模拟根据站点获取建筑列表的函数
async function getBuildingListBySite(site) {
    // 替换为你的实际数据逻辑
    return [
        {label: `${site.label} - 办公楼`, value: 'office'},
        {label: `${site.label} - 厂房`, value: 'factory'},
    ];
}

2. 针对react-native-dropdown-picker的关键调整 #

• 添加唯一key值：当切换站点时，通过改变第二个下拉框的key值，强制React销毁旧组件并渲染新组件，确保新的items数据被正确加载。这是解决第三方下拉组件不响应props更新的通用技巧。
• 使用组件原生回调：直接使用DropDownPicker提供的onSelectItem回调，避免自定义封装组件可能带来的props传递遗漏问题。
• 校验items格式：确保buildingDropdownData是包含label和value字段的数组，符合组件要求的数据格式。

3. 自定义封装组件的排查点 #

如果你是自己封装了DropDownSelect组件，需要检查内部是否正确监听items props的变化：

class DropDownSelect extends React.Component {
    state = {
        items: this.props.items
    }

    componentDidUpdate(prevProps) {
        // 当外部props.items变化时，同步更新组件内部state
        if (prevProps.items !== this.props.items) {
            this.setState({items: this.props.items});
        }
    }

    // 组件渲染逻辑...
}

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