React Native：'componentWillReceiveProps'清除下拉列表选择的值

Question

我使用React Native Modal Dropdown插件创建了一个包含两个下拉列表字段的表单（以及其他表单元素）。 这两个下拉列表是：

1. 国家清单
2. 国家列表（按上面选择的国家过滤）

我目前在“状态”下拉列表中遇到问题，该状态从从“国家/地区”下拉列表中选择某项时设置的状态接收countryId值。 然后将其用于传递给我的状态下拉列表。

值得注意的是，我上面列出的两个下拉列表已被分为多个组件以实现可重用性。

表格代码：

static propTypes = {
    navigation: PropTypes.object
};

state = {
    countryId: 0,
    stateId: 0
}

componentWillMount() {
}

onCountryDropDownSelected = (val) => {
    this.setState({ countryId: val });
}

onStateDropDownSelected = (val) => {
    this.setState({ stateId: val });
}

render() {
    return (
        <Container>
            <StatusBar barStyle="default" />
            <CountryDropDownList onSelect={this.onCountryDropDownSelected} />
            <Text>Country: {this.state.countryId}</Text>
            <StateDropDownList onSelect={this.onStateDropDownSelected} countryId={this.state.countryId} />
        </Container>
    );
}

StateDropDownList组件的代码：

class StateDropDownList extends Component {
    static propTypes = {
        countryId: PropTypes.number,
        onSelect: PropTypes.func
    };

    state = {
        data: [],
        errorMessage: '',
        isLoading: false
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.countryId != undefined) {
            return this.populatePicker(nextProps.countryId);
        }
    }

    populatePicker(countryId) {
        // This method fetches data from the API to store in the 'data' state object.
    }

    dropDownRenderRow(rowData, rowID, highlighted) {
        let evenRow = rowID % 2;

        return (
            <TouchableHighlight underlayColor='cornflowerblue'>
                <View style={{backgroundColor: evenRow ? 'lemonchiffon' : 'white'}}>
                    <Text style={{color: 'black'}}>
                        {rowData.name}
                    </Text>
                </View>
            </TouchableHighlight>
        );
    }

    dropDownRenderButtonText(rowData) {
        console.log('dropDownRenderButtonText', rowData);
        return rowData.name;
    }

    dropDownRenderSeparator(sectionID, rowID, adjacentRowHighlighted) {
        return (<View key={rowID} />);
    }

    dropDownOnSelect(rowID, rowData) {
        // Get the selected value and pass to parent component through onSelect() event in parent.
        this.props.onSelect(rowData.id);
    }

    render() {
        return (
            <View>
                <Text>Home State</Text>
                {this.state.data && this.state.data.length > 0 ?
                    <ModalDropdown defaultValue='Select one'
                          style={{flex:1}, {marginTop: 10}}
                          options={this.state.data}
                           onSelect={(rowID, rowData) => this.dropDownOnSelect(rowID, rowData)}
                          renderButtonText={(rowData) => this.dropDownRenderButtonText(rowData)}
                          renderRow={this.dropDownRenderRow.bind(this)}
                          renderSeparator={(sectionID, rowID, adjacentRowHighlighted) => this.dropDownRenderSeparator(sectionID, rowID, adjacentRowHighlighted)} />
                    :
                        <Text>No regions for country.</Text>
                }
            </View>
        );
    }
}

我注意到的是'componentWillReceiveProps'函数正在阻止我的下拉列表具有选定的值。 但不幸的是，我需要此函数，以便在从父级传入countryId值时更新道具。

当我删除this.props.onSelect(rowData.id); 在该dropDownOnSelect（）函数中的一行中，正确设置了下拉值。 我想是这种情况，因为我没有设置prop值。

我可以看到问题所在，但无法解决。

任何帮助表示赞赏！

Answer 1

我解决了这个问题。 做了一个简单的错误，以检查nextProps.countryId是否与props.countryId ，这现在很有意义：

componentWillReceiveProps(nextProps) {
    if (nextProps.countryId && nextProps.countryId != this.props.countryId) {
        return this.populatePicker(nextProps.countryId);
    }
}