React hooks中类似于setState回调的方法是什么？

Question

我有一个包含答案列表的模态框。 我可以点击答案来进行选择，然后再点击按钮确认我的选择。 或者我也可以双击答案来选择并确认。

我在正确处理双击情况上遇到了问题。

使用React类组件，我会像这样使用setState()的回调函数：

setState({selectedAnswer: answer}, confirm)

但是现在，我只弄清楚了以下内容：

const MyModal = ({hide, setAnwser}) => {
  const [selectedAnswer, setSelectedAnswer] = useState(null);
  const [isSelectionDone, setIsSelectionDone] = useState(false);

  const confirm = () => {
    if (!selectedAnswer) {
      return;
    }

    setAnwser(selectedAnswer);
    hide();
  };

  const handleAnswerOnClick = (answer) => {
    setSelectedAnswer(answer);
  };

  const handleAnswerOnDoubleClick = (answer) => {
    setSelectedAnswer(answer);
    setIsSelectionDone(true);
  };

  useEffect(confirm, [isSelectionDone]);

  return (
    <div>
      <div>{answers.map((answer) => <MyAnswer
        isSelected={answer.id === selectedAnswer?.id}
        key={answer.id}
        answer={answer}
        onClick={handleAnswerOnClick}
        onDoubleClick={handleAnswerOnDoubleClick}/>)}</div>
      <button onClick={confirm}>Confirm</button>
    </div>
  );
}

我强烈怀疑有一种更好的方法来完成它。
也许一个简单的：

const MyModal = ({hide, setAnwser}) => {
  const [selectedAnswer, setSelectedAnswer] = useState(null);

  const confirm = () => {
    if (!selectedAnswer) {
      return;
    }

    setAnwser(selectedAnswer);
    hide();
  };

  const handleAnswerOnClick = (answer) => {
    setSelectedAnswer(answer);
  };

  const handleAnswerOnDoubleClick = (answer) => {
    setAnwser(answer);
    hide();
  };

  return (
    <div>
      <div>{answers.map((answer) => <MyAnswer
        isSelected={answer.id === selectedAnswer?.id}
        key={answer.id}
        answer={answer}
        onClick={handleAnswerOnClick}
        onDoubleClick={handleAnswerOnDoubleClick}/>)}</div>
      <button onClick={confirm}>Confirm</button>
    </div>
  );
}

哪种方式更好？

- Rodolphe

Answer 1

在Hooks中没有类似于“设置状态后触发回调”的功能。 但是，您可以应用以下重构：

 const confirm = (sAnswer = selectedAnswer) => {
    if (!sAnswer) {
      return;
    }

    setAnwser(sAnswer);
    hide();
  };

然后

 const handleAnswerOnDoubleClick = (answer) => {
    setSelectedAnswer(answer);
    confirm(answer);
  };

- Giorgi Moniava

---

谢谢你的建议。我会这样做。 虽然我认为我会跳过 setSelectedAnswer(answer);，因为在模态框被 confirm() 关闭后它将没有任何用处。 - Rodolphe