简体   繁体   English

React Component中未定义“功能”

[英]'function' is not defined within React Component

I'm very new to working with react so I tried to create a small timer application, but I receive the following error when I run this code: 我对使用React非常陌生,因此尝试创建一个小型计时器应用程序,但是在运行此代码时收到以下错误:
(Line 40: 'timeDisplay' is not defined no-undef) (第40行:“ timeDisplay”未定义为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>
        )
    }
}

Not sure what to do in this situation, I used the arrow function for defining the timeDisplay method inside the component. 不知道在这种情况下该怎么做,我使用了箭头功能来定义组件内部的timeDisplay方法。

Well timeDisplay is member of instance of Home component. 好时间timeDisplay是Home组件实例的成员。 You need this to access that function. 您需要使用this来访问该功能。 Therefore using : 因此使用:

const time = this.timeDisplay();

is the correct one instead 是正确的代替

const time = timeDisplay();

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 在单击事件的反应函数组件中定义的调用函数形成另一个函数组件 - React.js - Calling function defined within a react function component on a click event form another function component - React.js React-无法使用在容器组件中定义的 function 从子组件更改 state - React- Unable to change state from child component using function defined within a container component 反应状态是否打算在定义的组件中使用? - Is the react state meant to be used within the component it is defined? 是否可以公开在 React function 组件中定义的 function 以在其他组件中调用? - Is it possible to expose a function defined within a React function component to be called in other components? React Arrow Function Component - 未定义setState - React Arrow Function Component - setState is not defined React function - 未定义 no-undef - 组件集成 - React function - is not defined no-undef— component integration 骨干调用在React组件函数中不起作用 - Backbone call not working within React component function React:从函数内部渲染组件 - React: render component from within function 在另一个组件中反应JS调用函数 - React JS call function within another component React 组件中的 function 是否不纯有关系吗? - Does it matter if a function within a React component is not pure?
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM