Question

我创建了一个播放视频页面，在该页面上有一个视频播放器，其下方带有视频信息，如/不喜欢按钮，评论索引和添加评论表格。除div显示特定视频的点赞次数外，其他所有操作均正常。 on like prevProps和this.props之间的点赞长度有所不同，因此它会更新其应有的方式，但是与之不同的是，即使后端更新适当且点赞永远不会，由于某种原因，长度是相同的获取。关于它为什么不起作用的任何想法？

    componentDidUpdate(prevProps) {
        // console.log(prevProps.likes.length, this.props.likes.length)
        if (prevProps.likes.length !== this.props.likes.length) {
            this.props.fetchLikes();
            console.log(this.likesNumber());
        } else if (prevProps.comments.length !== this.props.comments.length) {
            this.props.fetchComments();
            this.commentsNumber();
        }
        
    }

    likesNumber() {
        if (!this.props.video) return null;
        const videoLikes = this.props.likes.filter(like => Object.values(like)[0].video_id == this.props.video.id);
        if (videoLikes.length === 1) {
            return "1 Like"
        } else {
            return `${videoLikes.length} Likes`
        }
    }

渲染方法

render() {
        if (!this.props.video) { return null }
        const users = this.props.users;
        const videoLikes = this.props.likes.filter(like => Object.values(like)[0].video_id == this.props.video.id);
        const videoComments = this.props.comments.filter(comment => comment.video_id == this.props.video.id);
        const owner = users.filter(user => user.id === this.props.video.owner_id)[0];

        if (!owner) { return null };
        return (
            <div id="video-container">
                <video
                    className="video-player"
                    controls="controls"
                    src={this.props.video.video_url}
                    onPlay={this.playCount}
                    autoPlay="autoplay"
                    muted >
                    <div className="like"><Like id="like" video={this.props.video} props={this.props}/></div> 
                </video>
                <div id="play-info">
                    <div className="header-like">
                        <h1 className="play-title">{this.props.video.video_title}</h1>
                        <Like video={this.props.video} props={this.props}/>
                    </div>
                    <h2 className="play-date">{this.dateCreated(this.props.video.created_at)}</h2>
                    <div className="owner-name-initial">
                        <h2 className="owner-initial">{owner.username.split("")[0]}</h2> 
                        <h2 className="owner-name">{owner.username}</h2> 
                    </div>
                    <div className="video-info">
                        {/* <div className="play-count">
                            <img src="https://img.icons8.com/windows/48/000000/play.png" />
                            <h2 >{this.state.count}</h2>
                            <div className="hidden-views">{this.playNumber()}</div>

                        </div> */}
                        <div className="likes-count">
                            <img src="https://img.icons8.com/windows/32/000000/like.png" />
                            <h2>{videoLikes.length}</h2>
                            <div className="hidden-likes">{this.likesNumber()}</div>
                        </div>
                        <div className="comments-count">
                            <img src="https://img.icons8.com/material-outlined/50/000000/topic.png" />
                            <h2>{videoComments.length}</h2>
                            <div className="hidden-comments">{this.commentsNumber()}</div>
                        </div>
                    </div>
                    <h2 className="play-description">{this.props.video.video_description}</h2>
                </div>
                <CommentIndex video={this.props.video} history={this.props.history}/>
                <Comment video={this.props.video} history={this.props.history}/>
                <div className="home-footer">
                    <h2 className="home-footer-1">@2020</h2>
                    <h2 className="home-footer-2">
                        Made with
                            <svg viewBox="0 0 20 20" className="_3Weix"><path d="M10 18a1.23 1.23 0 01-.8-.4 14.25 14.25 0 00-4.4-3.7C2.5 12.3 0 10.7 0 7.5a5.52 5.52 0 011.6-3.9A5.73 5.73 0 016 2a5.25 5.25 0 014 1.9A5.85 5.85 0 0114 2c2.9 0 6 2.2 6 5.5s-2.5 4.8-4.8 6.4a15.51 15.51 0 00-4.4 3.7 1.23 1.23 0 01-.8.4z" fill="rgb(255,0,0)"></path></svg>
                            NYC
                        </h2>
                </div>
            </div>
        );
    }

喜欢控制器

class Api::LikesController < ApplicationController
    
    def index
        @likes = Like.all
        render :index
    end

    def new
        @like = Like.new
        render :new
    end

    def show
        @like = Like.find(params[:id])
        render :show
    end

    def create
        @like = Like.new(like_params)
        @like.liker_id = current_user.id 
        if @like.save
            render :show
        else
            render json: @like.errors.full_messages , status: 422
        end
    end

    def destroy
        @like = Like.find(params[:id])
        @like.destroy
        render :index
        # respond_to do |f|
        #     f.html { redirect_to :index }
        #     f.json { head :no_content }
        # end
    end

    def like_params 
        params.require(:like).permit(:liker_id, :video_id)
    end

end

jbuilder部分/索引/显示

json.extract! like, :id, :liker_id, :video_id, :created_at

json.array! @likes do |like|
# @likes.each do |like|
    json.set! like.id do
        json.partial! 'like', like: like
    end
end

json.partial! 'like', like: @like

componentDidUpdate只在like上赞组件更新

0 个答案: