React问答应用组件定时重定向及componentWillMount()问题咨询

Hey there! Let's break down your Q&A app needs and your component lifecycle question clearly.

一、实现Question组件的60秒自动重定向功能 #

First, let's build the timer logic that triggers a redirect to the home page after 60 seconds—whether the user doesn't answer or navigates away. We'll cover both functional and class component approaches, since either might fit your setup.

函数组件推荐方案（React 16.8+） #

Using hooks is the modern way to handle side effects like timers. Each Question instance will get its own independent timer, so 6 questions won't interfere with each other:

import { useEffect, useRef } from 'react';
import { useNavigate } from 'react-router-dom';

const Question = ({ questionText }) => {
  const navigate = useNavigate();
  // Use useRef to store the timer ID—its value persists across renders
  const timerRef = useRef(null);

  useEffect(() => {
    // Start the 60-second timer when the component mounts
    timerRef.current = setTimeout(() => {
      navigate('/'); // Redirect to home after timeout
    }, 60000);

    // Cleanup: Clear the timer when the component unmounts (e.g., user navigates away)
    return () => {
      clearTimeout(timerRef.current);
    };
  }, [navigate]); // Dependencies: Only re-run if navigate changes (rarely happens)

  // Clear the timer when the user submits an answer
  const handleAnswerSubmit = () => {
    clearTimeout(timerRef.current);
    // Add your answer submission logic here (e.g., go to next question)
  };

  return (
    <div className="question-card">
      <h3>{questionText}</h3>
      {/* Add your answer options here */}
      <button onClick={handleAnswerSubmit}>Submit Answer</button>
    </div>
  );
};

export default Question;

类组件方案（如果你仍使用类组件） #

If you're working with class components, avoid the old componentWillMount and use componentDidMount instead—it's safer and more reliable:

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';

class Question extends Component {
  constructor(props) {
    super(props);
    this.timerId = null;
  }

  componentDidMount() {
    // Start timer AFTER the component mounts (DOM is ready)
    this.timerId = setTimeout(() => {
      this.props.history.push('/');
    }, 60000);
  }

  componentWillUnmount() {
    // Clean up timer when component is removed from DOM
    clearTimeout(this.timerId);
  }

  handleAnswerSubmit = () => {
    clearTimeout(this.timerId);
    // Add answer submission logic here
  };

  render() {
    const { questionText } = this.props;
    return (
      <div className="question-card">
        <h3>{questionText}</h3>
        <button onClick={this.handleAnswerSubmit}>Submit Answer</button>
      </div>
    );
  }
}

export default withRouter(Question);

Key notes for both approaches:

• Each Question instance gets its own timer, so 6 questions run independently
• We clear the timer on component unmount (user leaves) and on answer submission to prevent accidental redirects
• No risk of memory leaks thanks to cleanup logic

二、关于componentWillMount的疑问解答 #

Let's cut to the chase: You should never use componentWillMount in modern React. Here's why:

1. It's marked as unsafe: React 16.3+ flagged it as unsafe_componentWillMount because it causes issues in server-side rendering (SSR) and async rendering. It can run multiple times unexpectedly, leading to bugs like duplicate API calls or timer conflicts.
2. It runs before the component mounts: The DOM isn't ready yet, so any DOM-dependent logic here will fail.
3. There's no advantage over modern alternatives: For your use case, componentDidMount (class components) or useEffect (functional components) do exactly what you need—run once when the component mounts—without the risks.

For your 6 Question instances, using componentDidMount or useEffect ensures each instance initializes its own timer without interfering with others, just like you want.

If you needed to restart the timer when the question changes (e.g., props update), you can adjust the useEffect dependencies:

// In the functional component example, add questionText to dependencies
useEffect(() => {
  clearTimeout(timerRef.current); // Clear old timer first
  timerRef.current = setTimeout(() => navigate('/'), 60000);
  return () => clearTimeout(timerRef.current);
}, [navigate, questionText]); // Restart timer when questionText changes

内容的提问来源于stack exchange，提问作者jdip88