反应忽略事件，直到 setState 完成设置 usestate

Question

我必须将笔记与麦克风检测到的传入笔记相匹配。我正在使用 fft 来检测音高并将其与下一个最接近的音符相匹配。它以大约 10x/s 的速度触发 handleNoteEvent。问题是因为 setNote 多次异步 if 语句 == true ，直到 setState 完成设置随后导致应用程序多次重新呈现的值。在使用 React 钩子时如何等到 setState 完成？ （currentNote 被多个孩子使用）

编辑：如果我正确理解文档，带有钩子的setState 似乎不会返回承诺或接受回调

编辑 2：我想我必须澄清我的问题：我需要在 if 变为 true 后忽略传入的事件，直到 setState 完成将 currentNote 设置为新的 note 对象。

function App() {
const [currentNote, setNote] = useState(new Note());

//Event handler that gets the event from the fft tuner multiple times a second
const handleNoteEvent = (fftNote) => {
    if (currentNote == fftNote)) {
      console.log('match');
      nextNote();
    }
//The problem here is the nextNote() is fired multiple times since setNote is async. How can I ignore all incoming events while setNote is not finished?
const nextNote = () => {setNote(new Note())};
...
}

Answer 1

好吧，我现在所拥有的东西在实现音符变化时的 useEffect 时应该可以正常工作。 这似乎是一个相当肮脏的解决方案，如果有人能告诉我如何更干净，我将不胜感激：

const [currentNote, setNote] = useState(new Note());
var waiting = false;
const handleNoteEvent = (receivedNote) => {
    if ((currentNote == receivedNote) && !waiting) {
      waiting = true;
      setNote(new Note());
    }
  };
  useEffect(() => {
    waiting = false;
  }, [currentNote]);

Answer 2

您必须处理在另一个useEffect 中的setNote 之后发生的事情。类似的东西：

React.useEffect(() => {
  // Triggered only once when your component mounts (= componentDidMount in class component)
}, []);

React.useEffect(() => {
  // It is only triggered when not changes.
  // Do your things after setting notes here.
  // Be careful about looping. If you set note here, you'll need to check the value as you did in your exemple to prevent updating note indefinitely
}, [note]);

一般来说，您不限于一种 useEffect 或一种钩子。如果需要，使用多个 useState 和 useEffect 拆分您的任务。