如何使用useEffect和useCallback，这样屏幕在按钮点击之前就不会调用函数

Question

我正在学习useEffect和useCallBack钩子。我要做的是在useCallBack中添加一个函数，并确保在单击按钮之前屏幕不会调用该函数。下面是我的示例代码。目前，它在我点击按钮之前调用useEffect内部的函数。我的目标是单击按钮，然后用useCallBack函数触发useEffect函数。还是新手，谢谢你的帮助。

import React, {useState, useEffect, useCallback} from 'react';
import {Button, StyleSheet, View} from 'react-native';
const submitHandler = useCallback(() => {
console.log('the inputs tracking');
}, []);
useEffect(() => {
console.log('Should not be work until submitHandler button is clicked');
}, [submitHandler]);
return (
<View>
<Button title="Click me" onPress={submitHandler}></Button>
</View>
)

Answer 1

我认为你不需要从useEffect中调用submitHandler-只需删除useEffect块并执行submitHandler中的所有逻辑。

你会看到useEffect运行，因为所有的useEffects都会在第一次渲染时运行。

如果useEffect在某种程度上是必需的，您将需要一个额外的状态来跟踪按钮是否被单击。

const [clickCount, setClickCount] = useState(0);
const submitHandler = useCallback(() => {
console.log('the inputs tracking');
}, []);
useEffect(() => {
if (clickCount > 0) {
submitHandler();
}
}, [clickCount, submitHandler]);
return (
<View>
<Button title="Click me" onPress={() => setClickCount((x) => x++)}></Button>
</View>
);

onPress回调增加计数，这将触发useEffect和调用submitHandler。虽然，我认为这是不必要的，一个单一的useCallback提供给onPress是正确的方式。

关于代码的附加注释:

在useEffect依赖数组中添加submitHandler并不意味着当submitHandler被调用时效果会运行。useEffect将在submitHandler改变时运行(它的对象引用)，因为它的依赖数组是空的，所以它永远不会改变。这意味着useEffect只会在第一次渲染时触发。