Question

我非常擅长使用react，所以我尝试创建一个小型计时器应用程序，但是当我运行此代码时收到以下错误：
（第40行：＆＃39; timeDisplay＆＃39;未定义no-undef）

class Home extends React.Component {
    constructor(props) {
        super(props);


        // Four states:
        // work , workStop, break, breakStop

        this.state = {
            status: 'workStop',
            time: 1500
        }
    }

    componentDidMount() {
        var interval = setInterval(this.timeTick, 1000);
        this.setState({interval});
    }

    componentWillUnmount() {
        clearInterval(this.state.interval);
    }

    timeTick = () => {
        if (this.state.time !== 0)
            this.setState({
                time: this.state.time - 1
            });
    }

    timeDisplay = () => {
        const minute = Math.floor(this.state.time / 60);
        const second = (this.state.time % 60) < 10 ? '0' + (this.state.time % 60) : (this.state.time % 60);
        return (minute + ' : ' + second);
    }

    render() {
        const time = timeDisplay();
        return (
            <div>
                <p className='timer'>{time}</p>
            </div>
        )
    }
}

不确定在这种情况下该怎么做，我使用了箭头函数来定义组件内的timeDisplay方法。

Answer 1

好timeDisplay是Home组件实例的成员。您需要this才能访问该功能。因此使用：

const time = this.timeDisplay();

是正确的

const time = timeDisplay();

Answer 2

要访问类中的实例方法，请始终使用this。

＆＃39;功能＆＃39;未在React Component

2 个答案: