reactjs 如何让孩子在这种情况下与父母沟通React

cs7cruho 于 2022-12-03 发布在 React

关注(0)|答案(1)|浏览(130)

我正在做一个测验应用程序。目前我可以切换到下一个问题的答案（点击按钮）。此外，当计时器到期（每个问题10秒），它会自动切换到下一个问题（timer重置为默认状态），无论按钮点击与否。上述事情的工作和它的罚款。

然而我做了一个计时器作为一个单独的子组件，以避免不必要的父组件的重新呈现。问题是，当我点击一个按钮来回答问题timer不重置（但它应该）恢复到其默认状态值（10秒）.我不知道孩子之间如何交流（计时器）和父组件（App），因为我不想初始化父组件中timer状态并将其放在handleAnswerCorrectness中，所以当currentPage改变时，我也重置timer，因为这会导致父组件每秒重新呈现一次，从而失去将其作为子组件意义。

怎么做才合适？？？
第一个

reactjs

来源：https://stackoverflow.com/questions/74660414/how-to-make-child-communicate-with-parent-in-this-scenario-react

1条答案

按热度按时间

dgiusagp1#

Timer中的useEffect似乎同时设置状态timer并在依赖关系数组中阅读它，这可能会导致冲突。
也许可以尝试用更简单的逻辑将其分隔为2 useEffect，这样相关代码将只在需要时运行。
一个用于倒计时，并在currentPage发生变化时复位timer：

// Countdown effect
useEffect(() => {
  setTimer(10);
  const interval = setInterval(
    () =>
      setTimer((prevState) => {
        if (prevState > 0) return prevState - 1;
        return prevState;
      }),
    1000
  );

  return () => clearInterval(interval);
}, [currentPage]);

另一个处理超时和触发onCurrentPageChange：

// Timeout effect
useEffect(() => {
  if (timer === 0 && currentPage + 1 < questionsLenght)
    onCurrentPageChange((prevState) => prevState + 1);
}, [timer, currentPage, questionsLenght]);

可能还有其他问题需要解决，但希望这仍然有助于使逻辑更清晰。
示例：
第一次

赞(0）回复(0）举报 2022-12-03

我来回答

reactjs 如何让孩子在这种情况下与父母沟通React

1条答案

相关问题

热门标签

最新问答