1

私が持っているのは、エントリを投稿できるフィードです。これらのエントリは、すべてのユーザーが気に入る可能性があります。問題は、エントリに「いいね！」をした後、すぐに独自のエントリを書き続けると (したがって、新しいエントリがフィードの一番上にプッシュされると)、クリックしたすべての「いいね!」ボタンの状態が視覚的に取り消されてしまうことです。正しいデータが表示されていることを確認するには、手動で更新する必要があります。

この問題は非常に特殊であり、残念ながらこれに関連するものは見つかりませんでした。

Like コンポーネント (like.es6.jsx) のコードは次のとおりです。

class Like extends React.Component {
    constructor(props){
        super(props);
        this.state={
            like: this.props.entry.liked,
            likes: this.props.entry.likes_count
        }
        this.post = this.post.bind(this);
        this.delete = this.delete.bind(this);
    }

    post () {
        if(!(this.state.like)){
            $.ajax({
                    method: "POST",
                    url: "/api/v1/likes",
                    data: {
                        log_entry_id: this.props.entry.id
                    },
                })
                .then( (response) => {
                    this.setState({like: true})
                    let likes = this.state.likes;
                    likes++;
                    this.setState({likes: likes})
                });
        }
    }

    delete(){
        if(this.state.like){
            $.ajax({
                    method: "DELETE",
                    url: "/api/v1/likes/" + this.props.entry.id
                })
                .then( (response) => {
                    this.setState({like: false})
                    let likes = this.state.likes;
                    likes--;
                    this.setState({likes: likes})
                });
        }
    }

    render () {
        let show_likes = "";
        if(this.state.like) {
            show_likes = (this.state.likes > 1) ? ("You and " + (this.state.likes - 1) + ((this.state.likes == 2) ? (" other person") : (" others" )) + (" like this.")) : ("You like this.");
        }else if(this.state.likes > 0){
            show_likes = (this.state.likes == 1) ? (this.state.likes + " person likes this.") : (this.state.likes + " people like this.");
        }
        let like_button = this.state.like ?
            <a onClick={this.delete} className=" pull-right"><i className="fa fa-thumbs-o-down"></i> Dislike</a> :
            <a onClick={this.post} className=" pull-right"><i className="fa fa-thumbs-o-up"></i> Like</a>
        return (
            <div>
            <span>
                {show_likes}
            </span>
                {like_button}
            </div>
        );
    }
}

親コンポーネント 'log_entry.es6.jsx' に、次の方法で like コンポーネントを追加しました。

<Like entry={entry} key={entry.id} />

私が提供できる情報が他にある場合は、リクエストに応じて喜んで提供します. 私の問題を見直してくれてありがとう！

4

2 に答える 2

1

「独自のエントリを書き続ける」場合this.state、親コンポーネントで更新されますか? Likeもしそうなら、私はそれが時代遅れになった小道具で再レンダリングを引き起こしているに違いない!

このように考えてください:entry渡され<Like entry={entry} />た には、最初のページ読み込み時に true であったデータのみが含まれます。ユーザーが「いいね」をクリックするthis.dateと、コンポーネントは更新されますLikeが、元 entryのコンポーネントは更新されませんでした!

そのため、何らかの原因Likeで から再レンダリングentryが行われると、古いデータでレンダリングされます! ただし、ページを更新すると、最新のデータが取得され、正しく表示されます。

それは考えられる原因のように聞こえますか？

私が考えることができる最善の解決策は、コンテナー コンポーネントパターンです。このパターンでは、(ツリーの一番上にある) 1 つのthis.stateコンポーネントだけが を持っています。データを小道具として子に送信します。コンテナー コンポーネントのみが AJAX 要求と更新を送信しますthis.state。

あなたの場合、それはpostと関数を親コンポーネントに移動し、それらをイベントハンドラーとしてdelete渡すことを意味します (たとえば、) 。Like<Like onLike={this.post} onUnlike={this.delete} ...>LikeonClick={this.onLike}

renderこれには慎重な編成が必要ですが、すべてが非常に予測可能であるため、実際に効果があります。変更できるのはコンテナーの のみthis.stateであり、他のすべてはからthis.propsのみレンダリングされます!

于 2016-02-15T02:17:35.550 に答える