如何将代码从 Class 组件转换为功能组件

Question

谁能指导我是否改对了，或者应该如何将 class 组件正确转换为功能组件？

Class 组件文件

import React, { Component } from 'react'

export default class Timer extends Component {
    state = {
        minutes: 2,
        seconds: 0,
    }

    componentDidMount() {
        this.myInterval = setInterval(() => {
            const { seconds, minutes } = this.state

            if (seconds > 0) {
                this.setState(({ seconds }) => ({
                    seconds: seconds - 1
                }))
            }
            if (seconds === 0) {
                if (minutes === 0) {
                    clearInterval(this.myInterval)
                } else {
                    this.setState(({ minutes }) => ({
                        minutes: minutes - 1,
                        seconds: 59
                    }))
                }
            } 
        }, 1000)
    }

    componentWillUnmount() {
        clearInterval(this.myInterval)
    }

    render() {
        const { minutes, seconds } = this.state
        return (
            <div>
                { minutes === 0 && seconds === 0
                    ? <h1>Busted!</h1>
                    : <h1>Time Remaining: {minutes}:{seconds < 10 ? `0${seconds}` : seconds}</h1>
                }
            </div>
        )
    }
}

功能组件（我做的）

    import React, { useEffect, useState } from "react";
    
    export default function App() {
      const [state, setState] = useState({
        minutes: 2,
        seconds: 0

  });

  useEffect(() => {
    const myInterval = setInterval(() => {
      const { seconds, minutes } = state;

      if (seconds > 0) {
        setState((prevValue) => {
          return {
            ...prevValue,
            seconds: seconds - 1
          };
        });
      }
      if (seconds === 0) {
        if (minutes === 0) {
          clearInterval(myInterval);
        } else {
          setState((prevValue) => {
            return {
              ...prevValue,
              minutes: minutes - 1,
              seconds: 59
            };
          });
        }
      }
    }, 1000);

    return () => {
      clearInterval(myInterval);
    };
  }, []);

  return (
    <div>
      {state.minutes === 0 && state.seconds === 0 ? (
        <h1>Busted!</h1>
      ) : (
        <h1>
          Time Remaining: {state.minutes}:
          {state.seconds < 10 ? `0${state.seconds}` : state.seconds}
        </h1>
      )}
    </div>
  );
}

我不知道我在这里错过了什么，当我期待 class 组件代码的相同结果时，我没有得到它，有人可以告诉我我需要更改什么吗功能组件。

Answer 1

我把你的代码改成了这个：

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

export default function App() {
  const [state, setState] = useState({
    minutes: 2,
    seconds: 0
  });

  useEffect(() => {
    const myInterval = setInterval(() => {
      setState((prevValue) => {
        if (prevValue.seconds > 0) {
          return {
            ...prevValue,
            seconds: prevValue.seconds - 1
          };
        }
        if (prevValue.seconds === 0) {
          if (prevValue.minutes === 0) {
            clearInterval(myInterval);
            return prevValue;
          } else {
            return {
              ...prevValue,
              minutes: prevValue.minutes - 1,
              seconds: 59
            };
          }
        }
      });
    }, 1000);

    return () => {
      clearInterval(myInterval);
    };
  }, []);

  return (
    <div>
      {state.minutes === 0 && state.seconds === 0 ? (
        <h1>Busted!</h1>
      ) : (
        <h1>
          Time Remaining: {state.minutes}:
          {state.seconds < 10 ? `0${state.seconds}` : state.seconds}
        </h1>
      )}
    </div>
  );
}

希望有用

如何将代码从 Class 组件转换为功能组件

How to convert code from Class Component into Functional Component

reactjs

react-functional-component