Блог

Главная - Вопросы по программированию - Как я могу определить метод внутри компонента класса в React?

Как я могу определить метод внутри компонента класса в React?

#reactjs #react-lifecycle

#reactjs #реагировать-жизненный цикл

Вопрос:

Я создал простые цифровые часы в React. Кажется, это работает. Однако я хотел определить функцию обратного вызова внутри setState() отдельно. Но я получил сообщение об ошибке. Знаете ли вы, как я могу определить такую функцию с именем tick() вне componenDidMount ? Ниже приведен мой код

 import "./Clock.css";

class Clock extends React.Component {
    state = { date: new Date() };

    componentDidMount() {
        setInterval(() => {
            this.setState({ date: new Date() });
        }, 1000);
        console.log("componentdidmount");
    }

    render() {
        return (
            <div className="clock-container">
                <h1 className="clock">{this.state.date.toLocaleTimeString()}</h1>
            </div>
        );
    }
}

export default Clock;

Ответ №1:

Это то, на что вы хотите, чтобы это было похоже?

 tick(){
    this.interval = setInterval(() => {
        this.setState({ date: new Date() });
    }, 1000);
}

componentDidMount() {
    this.tick();
    console.log('componentdidmount');
}

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

Комментарии:

1. Да, это работает! Я определяю случайную функцию без содержимого, но она не работает: foo(){}, я получил следующую ошибку: index.js:1 Предупреждение: невозможно выполнить обновление состояния реакции для размонтированного компонента. Это ошибка, но она указывает на утечку памяти в вашем приложении. Чтобы исправить, отмените все подписки и асинхронные задачи в методе componentWillUnmount

2. Это связано с тем, что setInterval все равно будет выполняться, даже если компонент отключен. В этом случае. вам нужно добавить componenWillUnmount, где вы очищаете интервал. Я отредактирую код и покажу его там.

Метки: