javascript - 当我在 React 类 Component 的开头声明变量时出错

Question

我想知道为什么我把 _isMounted=false;在 myClass 的开头出现以下错误:“SyntaxError:意外的标记”。我正在关注该线程中的第二个答案:Can't perform a React state update on an unmounted component 。

class myClass extends Component {
    _isMounted = false;

    constructor(props) {
        super(props);

        this.state = {
           test: ""
        };
    }
}

感谢您的帮助。

这是我的代码，我正在尝试上面的代码来修复以下错误“无法在未安装的组件上执行 React 状态更新。这是一个空操作，但它表明应用程序中存在内存泄漏。要修复此问题，请在以下代码中取消 componentWillUnmount 方法中的所有订阅和异步任务:

import React, {Component} from 'react'

const months = ["January", "February", "March", "April", "May", "June", "July", "August"," September", "November", "December"]
const days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
const usaTime = new Date().toLocaleString("en-US", {timeZone: "America/New_York"})
const d = new Date(usaTime)

export default class DateTime extends React.Component {
    constructor() {
        super()
        this.state = {
            day: d.getDay(),
            month: d.getMonth(),
            date: d.getDate(),
            year: d.getFullYear(),
            time: d.toLocaleTimeString()
        }
        this.countingSecond = this.countingSecond.bind(this)
    }

    countingSecond() {
        this.setState({
            day: d.getDay(),
            month: d.getMonth(),
            date: d.getDate(),
            year: d.getFullYear(),
            time: d.toLocaleTimeString()
        })
    }

    componentDidMount() {
        setInterval(this.countingSecond, 1000)
    }

    componentWillUnmount(){
        // setInterval(this.countingSecond, 1000)
    }

    render() {
        return(
            <div className="timeclock-main">
                <h5>{days[this.state.day] + ', ' + months[this.state.month] + ' ' + this.state.date + ', ' + this.state.year }</h5>
                <h3>{this.state.time}</h3>
            </div>
            )
    }

}

Answer 1

来自React docs :

If you’re familiar with React class lifecycle methods, you can think of useEffect Hook as componentDidMount, componentDidUpdate, and componentWillUnmount combined.

Is unmounted is antipattern?

检查 isMounted = true || false，您可以使用useRef:

const Test = () => {

const componentIsMounted = useRef(true)
useEffect(() => {
    return () => {
        componentIsMounted.current = false
    }
}, [])
    return (
            <div>
                    test
            </div>
    );
}
export default Test;

<小时/>

您不想使用的解决方案已被弃用，但您仍然可以像这样使用它:

componentDidMount() { 
  this._ismounted = true;
}

componentWillUnmount() {
   this._ismounted = false;
}

<小时/>

编辑 - 您的工作组件:

const DateTime = (props) =>{

const initialMonths = ["January", "February", "March", "April", "May", "June", "July", "August"," September", "November", "December"]
const initialDays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
const usaTime = new Date().toLocaleString("en-US", {timeZone: "America/New_York"})
const d = new Date(usaTime)

const[days, setDays] = useState(d.getDay())
const[months, setMonths] = useState(d.getMonth())
const[year, setYear] = useState(d.getFullYear())
const[date, setDate] = useState(d.getDate())
const [time, setTime] = useState()

    useEffect(() => { 
        setTime(d.toLocaleTimeString())
        const id = setInterval(() => { setTime(time+1) }, 1000); return () => clearInterval(id); }, [time]
    )
    return (<>
        <h5>{initialDays[days] + ', ' + initialMonths[months] + ' ' + date + ', ' + year }</h5>
        {time}
        </>);
}

export default DateTime;