反应原生 |为什么我的函数会立即运行，而不仅仅是在 onPress?

Question

我刚刚开始掌握 react native 中的道具，所以我希望这是一个简单的解决方案。

我希望表单的状态更新以将用户带到表单中的下一页，并且我也希望响应的状态更新 - 当用户按下按钮组件 (onPress( 时。

但是，当我控制台时.log我看到的是更新状态函数立即运行，而不是在按下按钮时运行 - 因此它直接进入表单的第二个"页面"。

表单组件

import React, {useState} from 'react';
import { View, Text} from 'react-native';
import Happiness from './Happiness';
const StarterForm = () => {
const [formStage, setFormStage] = useState(1)
const [happinessLevel, setHappinessLevel] = useState('')
console.log(formStage)
console.log(happinessLevel)
const increaseTheStage = (happiness) => {
setHappinessLevel(happiness)
setFormStage(formStage +1)
}
switch (formStage) {
case 1:
return (
<Happiness 
passHappiness={increaseTheStage}
/>
)
case 2: 
return (
<Text>This is the case of two</Text>
)
}
}
export default StarterForm;

幸福成分

import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
const Happiness = (props) => {
return (
<View>
<Text>Which of the following best classifies your happiness?</Text>
<TouchableOpacity onPress={props.passHappiness('Excellent')}>
<Text>Excellent</Text>
</TouchableOpacity>
</View>
)
}

export default Happiness;

预期成果

当第一个屏幕打开时，我希望以下内容：

console.log(formStage) = "1" 
console.log(happinessLevel) = "" 

Answer 1

使用匿名函数

您立即调用该函数，将其切换到以下内容：

<TouchableOpacity onPress={() => props.passHappiness('Excellent')}>

现在，您已经创建了一个匿名函数，该函数使用参数"优秀"调用passHappiness，如下所示：

() => props.passHappiness('Excellent')

使用绑定

您还可以使用 bind 方法将参数"优秀"绑定"到函数中

<TouchableOpacity onPress={props.passHappiness.bind(this,'Excellent')}>

有关绑定方法的更多信息，请参阅此处。