Toggle Like和Dislike计数器在React中不起作用

Question

我有两个柜台：一个喜欢柜台和一个不喜欢柜台 我每个都有一个按钮来执行操作。

我的切换计数器不起作用。

想法是，当我们到达页面时，我可以喜欢或不喜欢，而不会影响其他柜台。

此后，如果我想更改投票数，我的计数器必须在选择的计数器中添加一个，而另一个则删除。

这些计数器将自动提供进度条。这就是为什么我需要这个计数器在彼此之间切换。

我的构造函数和我的handleClicks

constructor(props){
        super(props);
        this.handleClickLike = this.handleClickLike.bind(this)
        this.handleClickDislike = this.handleClickDislike.bind(this)
        this.state = {
          counterLikes : props.likes,
          counterDislikes: props.dislikes,
          liked : false,
          disliked : false,
          total : props.likes + props.dislikes,
        };
    }

    handleClickLike = () => {

        if(!this.state.disliked) {
            this.setState({
            liked : !this.state.liked,
            })    
        } else {
            this.setState({
            liked : true,
            disliked : false,
            counterLikes : this.state.counterLikes + 1,
            counterDislikes : this.state.counterDislikes - 1,
            total : this.state.counterLikes + this.state.counterDislikes + 1
            });
        }
    }

    handleClickDislike = () => {
        if(!this.state.liked) {
            this.setState({
            disliked : !this.state.dislike
            })    
        } else {
            this.setState({
            liked : false,
            disliked : true,
            counterLikes : this.state.counterLikes - 1, 
            counterDislikes: this.state.counterDislikes + 1,
            total : this.state.counterLikes + this.state.counterDislikes + 1
            });
        }
    }

这是我的渲染。我认为我的三元状况是问题的一部分。

render() {

        return (

            <div className="likeDislikeContainer">

                <form>

                    <div className="likeDislike">

                        <span>
                        {this.state.liked ? this.state.counterLikes : this.state.counterLikes}
                        </span>
                        <button
                        type="button"
                        id={this.props.id}
                        onClick={this.handleClickLike}
                        value="likes"
                        >Like</button>

                    </div>

                    <div className="likeDislike">

                        <span>
                        {this.state.disliked ? this.state.counterDislikes : this.state.counterDislikes}
                        </span>                        
                        <button
                        type="button"
                        id={this.props.id}
                        onClick={this.handleClickDislike}
                        value="dislike"
                        >Dislike</button>

                    </div>

                </form>

                <progress max={this.state.total} value={this.state.counterLikes}/>

            </div>
        );
    }