Javascript React-Native中的匿名函数

我是react native的初学者，最近，我在onPress属性中直接放置函数时遇到了一个无限循环。在某些情况下，直接函数调用是有效的，但在这种情况下，我必须使用匿名函数。 当我使用匿名函数时，到底发生了什么？ 为什么它不会导致无限循环

   export default function App()
   {
     const [state, setState] = useState({
       searchQuery: "",
       active: false,
       data: []
     });

     function setSearchQuery(val) {
       setState({...state, searchQuery: val});
     }
     function setActive(val) {
       setState({...state, active: val});
     }
     function setData(val) {
       setState({...state, data: val});
     }
     function keyboardDissmiss() {
       setState({...state, active: false});
       Keyboard.dismiss();
     }

     return (
       <TouchableWithoutFeedback onPress={keyboardDissmiss}>
         <SafeAreaView style={GlobalStyles.droidSafeArea}>
           <View style={{height: 50,alignItems: 'center', backgroundColor: "blue"}}>
             <Text>{state.searchQuery}</Text>
           </View>
           <View style={{flex:1}}></View>
           <NavBar state={state.active} style={styles.container} onPress={() => setActive(true)}> 
             {state.active && 
               <SearchBar 
                 value={state.searchQuery} 
                 onBlur={() => setActive(false)} 
                 search={setSearchQuery}
               />}
           </NavBar>
         </SafeAreaView>
       </TouchableWithoutFeedback>
    );
}

导出默认函数App（）
{
常量[状态，设置状态]=使用状态({
searchQuery:“”，
活动：错误，
数据：[]
});
函数setSearchQuery（val）{
setState（{…state，searchQuery:val}）；
}
功能设置激活（val）{
setState（{…状态，活动：val}）；
}
函数设置数据（val）{
setState（{…状态，数据：val}）；
}
函数键盘dissmiss（）{
setState（{…状态，活动：false}）；
键盘；
}
返回(
{state.searchQuery}
setActive（真）}>
{state.active&&
setActive（假）}
搜索={setSearchQuery}
/>}
);
}

我假设在您拥有

onPress={setActive（true）}

之前，事件侦听器需要一个函数，您传递的值实际上是评估函数setActive的结果，而不是将setActive设置为事件侦听器

事件侦听器不能有任何参数，因此，为了使用值true调用setActive get，当按下元素时，需要将其包装到另一个不带参数的函数中（因此可以传递函数本身和函数的返回值）

它不必是箭头函数，您可以定义一个不带参数的

setActiveToTrue

，只需调用

setActive（true）

，但这太麻烦了，这就是箭头函数的用途

onPress={handleMethod（val）}

在上面的例子中，handleMethod函数在渲染发生时立即被调用，因此它遇到了一个无限循环

为了避免这种情况，您需要遵循以下步骤：

onPress={（）=>handleMethod（val）}

如果没有任何参数要传递给handler方法，可以这样做

onPress={handleMethod}

onPress需要函数的引用，而不是函数调用