反应本机无限循环，同时将参数传递到函数中

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}
)
}
}