javascript - 在 React 中更新喜欢或不喜欢的计数器后更新进度条

Question

在我的计数器上做出喜欢或不喜欢的更改后，我的进度条没有更新。

我认为它来 self 的三元条件，我在喜欢或不喜欢计数器中加了一个。在此之后，我没有成功更新“总计”状态，所以它也没有更新进度条。

首先我从本地数据中接收喜欢和不喜欢

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 = (e) => {
        if(!this.state.disliked) {
            this.setState({
            liked : !this.state.liked,
            })    
        } else {
            this.setState({
            liked : true,
            disliked : false
            });
        }
    }

    handleClickDislike = (e) => {
        if(!this.state.liked) {
            this.setState({
            disliked : !this.state.disliked,
            })    
        } else {
            this.setState({
            liked : false,
            disliked : true,
            });
        }
    }

我的返回是我得到了三元条件和条件完成后不更新的进度条。

render() {

        return (

            <div className="like-dislike-container">

                <form>

                    <div className="likeDislike">

                        <span>
                        {this.state.liked ? this.state.counterLikes+1 : 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+1 : 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>
        );
    }

重要的是我必须保留我喜欢和不喜欢的按钮来切换。这样我们就可以只对喜欢或不喜欢投票，如果我们投票给一个，我们需要起飞或投票给另一个

Answer 1

你们很亲近!进度条没有更新的原因是因为 this.state.total 和 this.state.counterLikes 是从 props 设置的。当您在组件上调用 setState 时，这些 Prop 不会改变，只有当您在其父组件中调用 setState 时才会改变。

要解决此问题，请重新计算 handleClickLike 和 handleClickDislike 函数中的 total 和 counterLikes，然后将这些新值添加到 setState 调用中。