如何在 UseEffect 中使用 Clean up function 和 Async function？

Question

我经历了一次清理 function 的简单使用。在更改输入文本值时，我们会收到有关文本框中值的警报。

我有这样的代码

import React, { useState, useEffect } from "react";

function App() {
  const [value, setValue] = useState("");

  //Waits for a period of time then resolves
  function timeout(ms) {
    return new Promise((resolve) => setTimeout(resolve, ms));
  }

  const myAlert =async () =>{
    await timeout(1000);
    alert(`A name was changed: ${value}`);
  }

  useEffect(() => {
    let isCancelled = false;

    const handleChange = async () => {
      if (!isCancelled) {
      await myAlert();
      }
    };

    handleChange();

    return () => {
      isCancelled = true;
    };
  }, [value]);

  return (
    <div className="App">
      <div>
        <form>
          <label>
            Name:
            <input
              type="text"
              value={value}
              onChange={(event) => setValue(event.target.value)}
            />
          </label>
          <input type="submit" value="Submit" />
        </form>
      </div>
    </div>
  );
}

export default App;

这里我们在 useEffect 中调用myAlert 。 那么，我们如何在这种情况下使用清理 function，我们在使用效果中不更改 state，但在更改 state 的使用效果中调用异步 function。

codesandbox 链接在这里： https://codesandbox.io/s/strange-greider-7k1svi?file=/src/App.js

Answer 1

我不确定您为什么要尝试使用清理 function。在正常情况下，您必须在某些情况下设置 state。 效果是通过它们的依赖关系来控制的，而不是通过使用它们的组件的生命周期来控制的。

任何时候效果的依赖关系发生变化，useEffect 都会清除以前的效果并运行新的效果。

import React, { useState, useEffect } from "react";

function App() {
  const [value, setValue] = useState("");
  const [isCancelled, setsCancelled] = useState(false);

  //Waits for a period of time then resolves
  function timeout(ms) {
    return new Promise((resolve) => setTimeout(resolve, ms));
  }

  const myAlert = async () => {
    await timeout(1000);
    alert(`A name was changed: ${value}`);
  };

  useEffect(() => {
    const handleChange = async () => {
      if (isCancelled) {
        setsCancelled(true)
        await myAlert();
      }
    };

    handleChange();

  }, [value]);

  return (
    <div className="App">
      <div>
        <form>
          <label>
            Name:
            <input
              type="text"
              value={value}
              onChange={(event) => setValue(event.target.value)}
            />
          </label>
          <input type="submit" value="Submit" />
        </form>
      </div>
    </div>
  );
}

export default App;