Реагировать на собственный бесконечный цикл при передаче параметра в функцию

Question

Как вызвать функцию внутри другой функции>

Например,

У меня есть 2 каскадных выпадающих меню, значение которых от второго выпадающего списка зависит от первого выпадающего списка.внутри первого раскрывающегося списка есть такой метод

`onValueChange = {(value)=>{this.props.getSecondValue(value.id)}}.`

Мой вопрос: почему каждый раз, когда я меняю значение из первого раскрывающегося списка, это вызывает бесконечный цикл в функции this.props.getSecondValue()?

Как решить эту проблему.

Большое спасибо!

обновление

здесь мой фрагмент кода

import React, {Component} from 'react';
import {StyleSheet, Text, View, TouchableOpacity, KeyboardAvoidingView, SafeAreaView, ScrollView} from 'react-native';
import {bindActionCreators} from "redux";
import {RootActions} from "../../shared/root-actions";
import connect from "react-redux/es/connect/connect";
import Config from 'react-native-config';
import _ from 'lodash';
import {Dropdown} from 'react-native-material-dropdown';

type Props = {};

const styles = StyleSheet.create({
    container: {
        flex: 1
    }
});

class Index extends Component<Props> {

    constructor(props) {

        super(props);

        this.state = {

            point_type_id: '',

            point_category_id: '',

        }
        this._getPointTypes = this._getPointTypes.bind(this);
    this._getPointCategories = this._getPointCategories.bind(this);
    }

    componentDidMount() {
        this._getPointTypes();
    }

    _getPointTypes(){
        this.props.getPointTypes();
    }

   _getPointCategories(point_type_id){
        this.props.getPointCategories(point_type_id);
    }

    render() {
        let {

            point_type_id,

            point_category_id,

        } = this.state;
        let {

        } = this.locationDetailStates;
        return (
           <View style={styles.container}>
            ....
            <Dropdown
              label='Point types'
              data={point_types}
              labelExtractor = {(value)=>{this._getPointCategories(value.id)}}
            />
            <Dropdown
              label='Point categories'
            data={point_categories}
            />
          </View>
        );
    }
}

function mapStateToProps(state) {
    return {
        outdoorStates: state.outdoorStates,
        locationDetailStates:state.locationDetailStates
    }
}

function mapDispatchToProp(dispatch) {
    return bindActionCreators(RootActions, dispatch)
}

export default connect(mapStateToProps, mapDispatchToProp)(Index);

Answer 1

Попробуйте выполнить рефакторинг следующим образом:

function mapDispatchToProps(dispatch) {
    return {
        getSecondValue: (id)=>{
            //Your code here
        }
    }
}  
class MyClass extends React.Component {
    handleChange = (e)=>{
        //assign your id from event values
        this.props.getSecondValue(id);
    }
    ...
    render(){
        return (
          //inside a tag
              onChange = {this.handleChange}
       )
    }
}