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

Question

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

国家列表
州列表（按上面选择的国家过滤）

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

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

表单代码：

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 值时更新道具。

当我删除此 dropDownOnSelect() 函数中的 this.props.onSelect(rowData.id); 行时，下拉值设置正确。我想是这样的，因为我没有设置 prop 值。

我知道问题出在哪里，但没有办法解决它。

感谢任何帮助！

Answer 1

我解决了这个问题。犯了一个简单的错误，检查 nextProps.countryId 是否与 props.countryId 不同，现在可以理解了：

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

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

React Native: 'componentWillReceiveProps' clearing Dropdown Selected Value

javascript

reactjs

react-native