有人可以帮助我吗？在 React 中找不到问题答案

【问题标题】：Can somebody help me? Can't find problem in React有人可以帮助我吗？在 React 中找不到问题
【发布时间】：2021-03-24 14:27:25
【问题描述】：

我正在尝试在我的移动视图中制作倒计时时钟。但是我似乎无法使数字起作用，我的包装器没有连接。希望有人能看到我应该做什么。我对 Javascript 还是很陌生。

代码：

import React, { Component, Fragment, useState } from "react";

const MobileView = () => {
  class wrapper extends Component {
    constructor() {
      super();
      this.state = {};
    }

    componentDidMount() {
      this.startInterval();
    }

    startInterval = () => {
      const second = 1000;
      const minute = second * 60;
      const hour = minute * 60;
      const day = hour * 24;

      let x = setInterval(function () {
        document.getElementById("days").innerText = "00";
      }, second);
    };
  }
  return (
    <div className="wrapper">
      <header className="Appheader">
        <h1 id="head">Countdown</h1>
      </header>

      <div id="list">
        <ul>
          <li>
            <span id="days"></span>Days
          </li>
          <li>
            <span id="hours"></span>Hours
          </li>
          <li>
            <span></span>Mins
          </li>
          <li>
            <span></span>Seconds
          </li>
        </ul>
      </div>
    </div>
  );
};

export default MobileView;

【问题讨论】：

您可能想查看tutorial，它包括使用状态来更新要呈现的值。您通常不会通过 innerText 或类似方式更新值，而是通过设置状态并在 JSX 中引用该状态来更新。

标签： javascript reactjs

【解决方案1】：

你似乎混淆了一些概念：

您正在功能组件内创建一个您不使用的类组件
您正在尝试直接更新 DOM，而不是使用状态

以下是您需要执行的步骤：

在类和功能组件之间进行选择
相应地设置您的状态
启动间隔，每隔 X 秒更新一次状态
卸载组件时清除间隔
在渲染函数中使用您的状态值

这是一个使用功能组件的工作计数器，我将让你实现天、小时和分钟的逻辑。

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

// 1. Choose between a class and a functional component 
export const MobileView = () => {
  // 2. Setup your state accordingly
  const [secondsElapsed, setSecondsElapsed] = useState(0);

  const timer = () => {
    setSecondsElapsed(secondsElapsed + 1);
  };

  useEffect(() => {
    // 3. Start an interval that will update the state every X second
    const interval = setInterval(timer, 1000);

    // 4. Clear the interval when the component is unmounted
    return () => clearInterval(interval);
  });

  return (
    <div className="wrapper">
      <header className="Appheader">
        <h1 id="head">Countdown</h1>
      </header>

      <div id="list">
        <ul>
          <li>
            <span></span>
            {secondsElapsed} // 5. Use your state value in the render function
          </li>
        </ul>
      </div>
    </div>
  );
};

【讨论】：

【解决方案2】：

另外，我建议将 useCallback 和依赖项添加到 useEffect

 const timer = useCallback(() => {
    setSecondsElapsed(secondsElapsed => secondsElapsed + 1);
  }, []);

  useEffect(() => {
    // 3. Start an interval that will update the state every X second
    const interval = setInterval(timer, 1000);

    // 4. Clear the interval when the component is unmounted
    return () => clearInterval(interval);
  }, [timer]);

【讨论】：