如何防止多个 function 调用响应 js 值更改

Question

我想防止对用户操作进行多次 function 调用。在我的演示应用程序中，我有一个TABS和输入字段。 我想在用户TAB 更改时调用 function，当用户在输入字段上键入任何内容时调用相同的 function。当用户更改选项卡时也重置输入字段值。

问题是当我更改选项卡时，我的 function 被调用了两次。 为什么？ 我认为这仅是由于 setState。

这是我的代码https://codesandbox.io/s/sleepy-leaf-pi3ykn?file=/src/App.tsx

 const AsyncCall = () => {
    console.log("AsyncCallAsyncCallAsyncCallAsyncCall");
  };

  React.useEffect(() => {
    console.log("init");
    AsyncCall();
  }, [value, textValue]);

  React.useEffect(() => {
    console.log("reset value");
    setTextValue("");
  }, [value]); 


 

重现步骤

1. Run Application AsyncCall function call only 一次
2. 在输入字段示例“abc”中键入一些文本。 每次调用 function都是正确的行为
3. 清除控制台日志
4. 切换第二个选项卡。 如果您看到AsyncCall function 调用两次。 我只需要打电话一次。 不是两次。这是错误。 当用户切换标签时，我也需要重置输入字段

有什么办法可以预防。 我尝试使用ref对我没有用

我想在每次文本字段值更改和选项卡更改时调用 function。 但是当用户更改 Tab 时我需要重置文本字段值还有什么建议吗？

Answer 1

您可以像这样在 TextField onChange 中调用异步调用

 onChange={(e) => { setTextValue(e.target.value); AsyncCall(); }}

并且可以在 Tabs onChange 中重置你的值

 handleChange = (event: React.SyntheticEvent, newValue: number) => { setValue(newValue); setTextValue(""); }

摆脱 useEffect 它们在这里是不必要的

Answer 2

根据您的需要

我想在每次文本字段值更改和选项卡更改时调用 function。 但是当用户更改 Tab 时，我还需要重置文本字段值

让我们看看您的代码中的问题。

    React.useEffect(() => {
    console.log("init");
    AsyncCall();
  }, [value, textValue]);

当每个值和 textValue 更改时，您的 useEffect 都会调用。 如果我们在您的 valueChange 方法中调用AsyncCall()方法，我们可以删除此 useEffect。

对于文本字段

const handleTextChange = () => {

setTextValue(e.target.value);
    AsyncCall();
}
     <TextField
              id="outlined-basic"
              onChange={handleTextChange} // i name it handleTextChange
              value={textValue}
              label="Outlined"
              variant="outlined"/>

现在，每当您要更改 textValue 时，它都会调用AsyncCall()方法。

对于选项卡

 const handleChange = ()=>{
     setValue(newValue);
// resetting text value as you want to reset it on tab change 
        setTextValue(""); 
// Calling AsyncCall() on Tab menu change
        AsyncCall();
    }
          <Tabs
              value={value}
              onChange={handleChange}
              aria-label="basic tabs example"
            >
    </Tabs>

现在，不需要这些 useEffects

React.useEffect(() => {
    console.log("init");
    AsyncCall();
  }, [value, textValue]);

  React.useEffect(() => {
    console.log("reset value");
    setTextValue("");
  }, [value]); 

建议：对于 textValue，您可以使用 De-bounce 技术来避免不必要的重新渲染https://www.freecodecamp.org/news/debouncing-explained/

Answer 3

将此代码粘贴到您的handleChange方法中

 setValue(newValue);
 setTextValue("")

并删除你的第二个useEffect()钩子

React.useEffect(() => {
    console.log("reset value");
    setTextValue("");
  }, [value]);