有时需要双击，但并非总是如此

Question

我目前正在构建一个由 Redux 和 Firebase 支持的小型 React 应用程序。我添加的功能之一是切换/保存用户个人资料的喜欢。如果某些东西已经被喜欢，只需单击一下即可取消喜欢，再单击一次即可重新喜欢。但是，在新加载时，第一次喜欢某事物需要双击，然后每个后续事件都需要单击一次来喜欢/不喜欢。起初我以为这e.preventDefault()是搞砸了，但我删除了它，问题仍然存在。我把它归咎于它Link，但我把它换成了一个普通的div，仍然有同样的问题。我怎样才能摆脱双击来第一次喜欢某事？子组件import React, { Component } from "react";import { connect } from "react-redux";import { saveFavorite } from "../redux/actions";class VenueSummary extends Component {    state = {        loved: false    };    toggleHeart = e => {        e.preventDefault();        this.props.saveFavorite(this.props.venue, this.state.loved);        this.setState({ loved: !this.state.loved });    };    render() {        const { venue, loved, name } = this.props;        return (            <div className="card-title">                {name}                <i                className={loved ? "fas fa-heart right" : "far fa-heart right"}                onClick={this.toggleHeart}                />            </div>        );    }}const mapDispatchToProps = dispatch => {    return {        saveFavorite: (venue, loved) => dispatch(saveFavorite(venue, loved))    };};export default connect(    null,    mapDispatchToProps)(VenueSummary);