React-Native 中的匿名函数答案

【问题标题】：Anonymous function in React-NativeReact-Native 中的匿名函数
【发布时间】：2021-07-13 00:34:11
【问题描述】：

我是 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>
    );
}

【问题讨论】：

标签： javascript react-native frontend react-functional-component

【解决方案1】：

我假设在您拥有onPress={setActive(true)} 之前，但事件侦听器需要一个函数，您传递的值实际上是评估您的函数 setActive 的结果，而不是将 setActive 设置为事件侦听器

事件监听器不能有任何参数，所以为了让setActive被调用为true，当元素被按下时，你需要将它包装在另一个不带参数的函数中（因此你可以通过函数本身，以及函数的返回值）。

它不一定是箭头函数，你可以定义一个不带参数的setActiveToTrue，然后简单地调用setActive(true)，但这太麻烦了，这就是箭头函数的用途

【讨论】：

【解决方案2】：

onPress={handleMethod(val)}

在上面的例子中，handleMethod函数在渲染发生时就被调用，所以它遇到了一个无限循环。

为避免这种情况，您需要遵循以下原则：

onPress={() => handleMethod(val)}

如果您没有任何参数要传递给处理程序方法，则可以这样做

onPress={handleMethod}

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

【讨论】：