【问题标题】：Double click required sometimes, but not always有时需要双击，但并非总是如此
【发布时间】：2019-12-07 04:43:14
【问题描述】：

我目前正在构建一个由 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);

父组件

import React from "react";
import { connect } from "react-redux";
import { Link } from "react-router-dom";
import VenueSummary from "./VenueSummary";

const VenueList = props => {
    const { favorites, venues } = props;

    const venueList =
        venues && favorites ? (
        venues.map(venue => {
            const loved = favorites.includes(venue.id);
            return (
            <Link to={"/venue/" + venue.id} key={venue.id} className="col s6">
                <VenueSummary venue={venue} loved={loved} />
            </Link>
            );
        })
        ) : (
        <p>No venues to show</p>
        );
    return <div className="venue-list section">{venueList}</div>;
};

const mapStateToProps = state => {
    const favorites = state.firebase.profile.favorites;
    return { favorites };
};

export default connect(
    mapStateToProps,
    null
)(VenueList);

Redux 操作

export const saveFavorite = (venue, loved) => {
    return (dispatch, getState, { getFirebase, getFirestore }) => {
        const userId = getState().firebase.auth.uid;
        const firestore = getFirestore();
        const venueId = venue.id;
        const user = firestore.collection("users").doc(userId);

        if (loved) {
            user.update({
                favorites: firestore.FieldValue.arrayUnion(venueId)
            });
        } else {
            user.update({
                favorites: firestore.FieldValue.arrayRemove(venueId)
            });
        }
    };
};

【问题讨论】：

标签： javascript reactjs firebase redux jsx

【解决方案1】：

您正在将本地组件 state 与 redux 存储中的状态混合在您的 VenueSummary 中，用于 loved 属性。您应该只使用一个或另一个，在这种情况下，loved 的 redux 值。我建议完全从 state 中删除 loved 并执行以下操作：

    toggleHeart = e => {
        e.preventDefault();
        const {loved} = this.props;
        // toggle loved through redux
        this.props.saveFavorite(this.props.venue, !loved);
    };

您描述的问题有几个原因 - 一个是状态中 loved 的初始值没有与 props 的值同步 - 如果 props.loved 已经是 true，@987654333 @ 仍然以 false 开头。另一个是您当前的 toggleHeart 函数有一个错误，您在将 this.state.loved 的值传递给 redux 操作时没有否定它。如果出于某种原因您想在this.state 中跟踪loved，则需要解决这两个问题。

【讨论】：