Question

在对计数器进行喜欢或不喜欢的更改之后，我的进度栏不会更新。

我认为这是由于我的三元条件，我在自己的喜欢或不喜欢的柜台上添加了一个。此后，我没有成功更新“总计”的状态，因此也没有更新进度条。

首先，我收到来自本地数据的喜欢和不喜欢

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

您非常亲密！进度条不更新的原因是因为从props设置了this.state.total和this.state.counterLikes。当您在组件上调用setState时，仅当在其父组件中调用setState时，这些道具才会改变。

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

Answer 2

问题在于您尝试在render（）函数内部而不是在单击处理程序和setState（）内部增加计数器状态的方式：

DECLARE

CuRSOR L1 is 
SELECT * from tab1;

L_COUNT number:= 0;
 l_number_seats number := &1;
l_start_seat number;
l_end_seat number;
BEGIN
 l_start_seat := 0;
l_end_seat := 0;
 for i in l1
loop
   if L_COUNT = l_number_seats THEN 
     EXIT;
   end if;

 if i.state = 'Available' then
    if L_COUNT =0 then
       l_start_seat := i;
    else
      l_end_seat := i;
    end if;
   L_COUNT := L_COUNT +1;
else
L_COUNT := 0;
 end if;


END loop;
dbms_output.put_line(l_start_seat||' - '||l_end_seat);
END;

和

{this.state.liked ? this.state.counterLikes+1 : this.state.counterLikes}

换句话说，增量应该发生在点击处理程序内部，并使用setState（）进行设置。

如何进行这些更改？（警告：我尚未对此进行测试，但是您会想到的）

{this.state.disliked ? this.state.counterDislikes+1 : this.state.counterDislikes}

然后在渲染器中：

    handleClickLike = () => {
        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 = () => {
        this.setState({
            liked : false,
            disliked : true,
            counterLikes : this.state.counterLikes - 1, 
            counterDislikes: this.state.counterDislikes + 1,
            total : this.state.counterLikes + this.state.counterDislikes + 1
        });
    }

尽管，我应该指出，良好的清理可以使您的代码受益。您本可以以更清洁的方式实施它。但是我所做的更改有望解决您的问题。

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

2 个答案: