Question

我正在Web应用程序中使用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函数，并使其增加firebase中的余额值。

class Stracture extends React.Component {

  constructor() {...}

  componentDidMount() {...}

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

  render() {...}

}

有关how updates work here的更多信息。

您不需要更新状态，因为您已经有一个实时侦听器，因此一旦更新了Firebase中的值，更改将自动传播到您的应用程序。

如果您想传递一个值而不是增加一个值，则将该值传递给onClick处理程序并将其作为handleUpdate函数的参数接受。

您可能需要记住的另外两件事包括对更新函数的错误处理，因此您可以将其包装在try / catch块中，并将detaching the real-time listener包装在componentWillUnmount中。

如何使用React和Firebase更新CountJS的值

1 个答案: