Как обновить значение CountJS с реагировать и firebase

Question

Я использую Firebase, Count JS в моем веб-приложении. Вот мой код.

import firebase from 'firebase';
import CountUp from 'react-countup';
const config = { ... }
class Stracture extends React.Component {
    constructor() {
        super()
        if (!firebase.apps.length) {
        firebase.initializeApp(config);
    }
    this.state = { balance: 0 };
}
componentDidMount() {
    firebase.database().ref('user1').child('balance').on('value', snap => {
        this.setState({ balance: snap.val()})
    });
}
render() {
    const { classes } = this.props;
    return (
        <CountUp className={classes.typo2} decimals={2} duration={1.5} end={this.state.balance} prefix="Balance: " suffix=" $" />
    )
};

Мои коды работают нормально. Но теперь я хочу использовать функцию обновления, чтобы обновить значение из недавнего значения. Потому что, когда данные Firebase меняются, эта анимация начинается с 0 ..

Answer 1

Если вы хотите написать функцию обновления, добавьте обработчик onClick к компоненту CountUp, который указывает на новую функцию.

<CountUp onClick={() => this.handleUpdate()} className={classes.typo2} decimals={2} duration={1.5} end={this.state.balance} prefix="Balance: " suffix=" $"  />

Затем создайте функцию handleUpdate в классе и увеличьте значение баланса в базе данных.

class Stracture extends React.Component {

  constructor() {...}

  componentDidMount() {...}

  handleUpdate = () => firebase.database().ref('user1').update({balance: this.state.balance + 1})

  render() {...}

}

Подробнее о , как здесь работают обновления .

Вам не нужно обновлять состояние, поскольку у вас уже есть прослушиватель в режиме реального времени, поэтому, как только вы обновите значение в firebase, изменение автоматически распространится на ваше приложение.

Если вы хотите передать значение, а не увеличивать его на единицу, передайте это значение в обработчик onClick и примите его в качестве параметра функции handleUpdate.

Две другие вещи, которые вы, вероятно, должны иметь в виду, включают обработку ошибок функцией обновления, чтобы вы могли обернуть ее в блок try / catch и отсоединить прослушиватель реального времени в componentWillUnmount.