0

我正在学习 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>
)
4

1 回答 1

0

我认为您不需要submitHandler从 useEffect 调用 - 只需删除 useEffect 块并执行submitHandler.

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

如果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。虽然，我认为这是不必要的，提供给 onPress 的单个 useCallback 是正确的方法。

关于您的代码的附加评论：

添加submitHandleruseEffect 依赖数组并不意味着效果会在submitHandler调用时运行。useEffect 将在submitHandler更改时运行（它是对象引用），并且由于其依赖数组为空，因此它永远不会更改。这意味着 useEffect 只会在第一次渲染时触发。

于 2021-02-27T01:35:31.037 回答