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

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);