反应原生：有没有办法让"checkVal"函数按照我写下的逻辑工作？

Question

我试图编写函数">checkVal"；但这对我不起作用。我很乐意在这方面得到一些帮助。

这就是函数"；checkVal"；应该做：

1。应该只允许用户两次尝试输入"0"的值；TextInput"；领域

2.如果第一次满足条件；Teken_1_；并且还应该在TextInput字段下方显示复选框-如果用户已经标记了复选框；Teken_2_；以及"；拨号"；将出现。选中复选框后，该复选框将无法删除。。

3.如果第二次满足条件；Teken_2_；以及"；拨号"；必须显示。

import CheckBox from '@react-native-community/checkbox';
import { Teken_1_Modal } from '../components/Teken_1_Modal';
import { Teken_2_Modal } from '../components/Teken_2_Modal';
import { Dial } from '../components/Dial';
function App() {
const [toggleCheckBox, setToggleCheckBox] = useState(false)

//////////START FUNCTION ////////////////////////
function checkVal() {
const [count, setCount] = useState(0) // flag, can be between 0 to 2, will be reset after press it.
// The flag is per parameter {requestId} !!
if (count == 2) {
return; // exit the function
}else{ 
count ++
if (item.Immediate_Report_Min == null && item.Immediate_Report_Max !== null && inputValue > 
item.Immediate_Report_Max) ||
(item.Immediate_Report_Min !== null && item.Immediate_Report_Max == null && inputValue < 
item.Immediate_Report_Min) ||
(item.Immediate_Report_Min !== null && item.Immediate_Report_Max !== null && (inputValue > max || 
inputValue < min))
// then
if (count == 1) {// first try
<Teken_1_Modal />
setToggleCheckBox(toggleCheckBox);  //in case of Check of the checkBox so u cant uncheck after !!
// then
if (count == 2) {// second try   
<Teken_2_Modal />
< Dial />
setToggleCheckBox(toggleCheckBox);  
}
////////////////////END FUNCTION////////////////////////////

return (
<View>
<View style={styles.ParamViewInput}>
<TextInput
style={styles.ParamTextInput}
blurOnSubmit={true}
autoCapitalize="none"
autoCorrect={false}
keyboardType="number-pad"
maxLength={6}
placeholder="input.."
onChangeText={(text) => onChangeInput(index, text)}
value={inputMeasurement[index]}
onBlur={() => console.log('onBlur for index:', index)}
/>
<Text style={styles.label_C}>{item.Parameter_Units}</Text>
<TouchableOpacity onPress={() => {
setHistory_ModalVisible(item.Parameter_Code);
}} style={styles.ParameterUnit}>
<Text style={styles.Hlable}>H</Text>
</TouchableOpacity>
{<Text style={styles.SignText}>{icon}</Text>}
</View>
<CheckBox
disabled={false}
value={toggleCheckBox}
onValueChange={(newValue) => setToggleCheckBox(newValue)}
/>
<History_Modal reqId={requestId} paramId={item.Parameter_Code}
modalVisible={isHistory_ModalVisible == item.Parameter_Code}
setModalVisible={() => {
setHistory_ModalVisible(false);
}}
/>
</View>
);
}

Answer 1

假设checkVal是在更新后多次调用的东西，那么函数内部不应该有useState((。因为一旦函数被调用和处理，计数状态也被处理。

挂钩应该只在功能组件内部使用，而不是在用户操作时多次调用的其他函数。

将const [count, setCount] = useState(0);和toggleCheckBox一起放在外面

然后试着达到同样的效果。另外，在哪里尝试调用setCount，在哪里使用count？它需要处于状态吗？