Question

我正在开发React应用。我有一个类似instagram的帖子。该帖子有一个喜欢并保存按钮。例如，页面中的PostA和PostB，当我单击一个PostA喜欢的按钮时，它同时更改了PostA和PostB中的颜色。但是我需要单击哪个喜欢的按钮，该帖子，如颜色按钮应更改（与“保存”按钮相同）。

使用“ react”的版本：“ ^ 16.12.0”，“ react-router-dom”：“ ^ 5.1.2”，

由于堆栈溢出而产生大量故障，但没有人提供解决方案。

代码沙箱：https://codesandbox.io/s/crazy-volhard-f52q4?file=/src/Component/Dashboard.js

Dashboard.js

import React, { PropTypes } from 'react';
import axios from 'axios';

class Dashboard extends React.Component {
  constructor(props){
        var files;
        super(props);
         this.state =  {
          Is_Like:false,
            Is_Save:false,
            Error:'',
            btn_class :'spriteheartempty',
              likebutton:true,
            savebutton:true,
            count:'',
            clicked: false
         }
        }

    //Click On the Like Button//

AddLike(e,postid,islike){ --> Link in Add like button
   this.state.postid=postid;
  var counts = '';
  this.setState({likebutton: !this.state.likebutton})      
  const clicked = this.state.clicked;
  console.log(this.state.likebutton);
  if(this.state.likebutton){
     this.setState({Is_Like:"true"});
  }else{
     this.setState({Is_Like:"false"});
  }
 this.state.btn_class = this.state.likebutton ? "spriteheartempty" : "spriteheartfill"; --> Change to like button class style
  console.log(this.state.Is_Like)
  var access_token = localStorage.getItem('access_token');
  var username = localStorage.getItem('user');
  var guid= localStorage.getItem('Guiid');   
  const objval ={
     Post_Id:postid,
     User_Guiid:guid
  }

  axios.post('http://localhost:xxxx/Api/Authenticate/CheckExistLike1', objval,{ headers: { Authorization: access_token,Username:username } }).then(json => {
    if (json.data.Status === 'Exist') {

     axios.get('http://localhost:xxxx/Api/Authenticate/Getlikecount1'+'/'+ postid,{ headers: { Authorization: access_token,Username:username } }).then(response => {
        if(response.status=="200")
        {
           counts=response.data;
           if(this.state.likebutton){
              counts=counts-1;
              this.Likeval(e,postid,guid,counts,islike)
           }else{
              if(islike==true){
                 counts=counts-1;
              }else
              {
                 counts=counts+1;
              }

              this.Likeval(e,postid,guid,counts,islike)

           }
        }
     })
     .catch((error) =>{
        alert("Your Session time expired.Please Login Again."+error);
       // this.props.history.push('/');   
     });

    } else {
     if(clicked){
        counts = this.state.count-1;
        this.setState({count: counts})
        this.setState({clicked: false})
      //this.setState({count: this.state.count - 1, clicked: false});
    } else {
        counts = this.state.count+1;
       this.setState({count: counts})
      this.setState({clicked: true})
      this.Likeval(e,postid,guid,counts)
    //  this.setState({count: this.state.count + 1, clicked: true});
    }
    console.log(this.state.count)

              }               
      }) .catch((error) =>{
        alert("Your Session time expired.Please Login Again."+error);
       // this.props.history.push('/');   
     });


 e.preventDefault();
}

Likeval(e,postid,guid,counts,islike){
  let errors = {};
  var access_token = localStorage.getItem('access_token');
  var username = localStorage.getItem('user');
  var guid= localStorage.getItem('Guiid');  
  var like_val
  if(islike==true){
     like_val=false
  }else{
     like_val=this.state.Is_Like
  }

   const obj = {
     Post_Id:postid,
     User_Guiid:guid,
     LikeCount:counts,
     Is_Like:like_val

    }


    axios.post('http://localhost:xxxx/Api/Authenticate/AddLike1', obj,{ headers: { Authorization: access_token,Username:username } }).then(json => {
       if (json.data.Status === 'Success') {
           // alert("Message:" + json.data.Message)
            errors["Error"] = json.data.Message;
            this.setState({errors: errors });

       } else {
        errors["Error"] = json.data.Message;
        this.setState({errors: errors });
                   //  alert("Message:" + json.data.Message)                    
                    // this.props.history.push('/')
                 }               
         }) .catch((error) =>{
           alert("Your Session time expired.Please Login Again."+error);
          // this.props.history.push('/');   
        });

         e.preventDefault();
}
//Clicked on Save Button//
 AddSave(e,postid){


 this.setState({savebutton: !this.state.savebutton})

   var access_token = localStorage.getItem('access_token');
   var username = localStorage.getItem('user');
   var guid= localStorage.getItem('Guiid');   
   const obj = {
    Post_Id:postid,
    User_Guiid:guid
   }

   axios.post('http://localhost:xxxx/Api/Authenticate/AddSave', obj,{ headers: { Authorization: access_token,Username:username } }).then(json => {
      if (json.data.Status === 'Success') {
           //alert("Message:" + json.data.Message)
           this.Getfollow();
      } else {
                    alert("Message:" + json.data.Message)                    
                   // this.props.history.push('/')
                }               
        }) .catch((error) =>{
         alert("Your Session time expired.Please Login Again."+error);
         this.props.history.push('/');   
      });

   e.preventDefault();

 }
 //Clicked on Save Button//

  return (
     <div className="post_section_comment">
                                {

                          user.UserPost.map(post =>{
                                  return ( 

                                   <section className="post_section_comment_icon post_section_comment_val">
                                      {
                                          user.Like.length==0 ?(
                                            <span className="post_section_comment_span">
                                            <button style={{alignitems: 'center',border: '0'}} className= {this.state.btn_class} type="button"  onClick={(e) => this.AddLike(e,post.Post_Id)}>

                                            </button>
                                         </span>
                                            ):user.Like.map(like =>{
                                               return ( 
                                                  this.state.postid==null
                                                  ?(
                                                  like.length!=0 ?(
                                         <span className="post_section_comment_span">
                                            {like.Is_Like==false? this.state.btn_class="spriteheartempty" : this.state.btn_class="spriteheartfill"}
                                         <button style={{alignitems: 'center',border: '0'}} className= {this.state.btn_class} type="button"  onClick={(e) => this.AddLike(e,post.Post_Id,like.Is_Like)}>

                                         </button>
                                      </span>
                                                  ):null

                                              ):this.state.postid==post.Post_Id(
                                         <span className="post_section_comment_span">
                                         {like.Is_Like==false? this.state.btn_class="spriteheartempty" : this.state.btn_class="spriteheartfill"}
                                      <button style={{alignitems: 'center',border: '0'}} className= {this.state.btn_class} type="button"  onClick={(e) => this.AddLike(e,post.Post_Id,like.Is_Like)}>

                                      </button>
                                   </span>
                                                  )
                                               //    like.length==0?( 
                                               //     <span className="post_section_comment_span">
                                               //    <button style={{alignitems: 'center',border: '0'}} className= {btn_class} type="button"  onClick={(e) => this.AddLike(e,post.Post_Id)}>

                                               //    </button>
                                               // </span>
                                               //     ):null
                                        );
                                      })

                                      }

                                      {
                                          user.SavePost.length==0?(
                                      <span className="post_section_comment_save">
                                         <button className="post_section_comment_button_like" type="button" style={{alignitems: 'center',border: '0'}} className= {btn_savclass} onClick={(e) => this.AddSave(e,post.Post_Id)}>

                                         </button>
                                      </span>
                                      ):user.SavePost.map(save =>{
                                         return ( 
                                            save.length!=0?(
                                               <span className="post_section_comment_save">
                                                  {save.Is_Save==false? btn_savclass="spritesave" : btn_savclass="spritesaved"}

                                               <button className="post_section_comment_button_like" type="button" style={{alignitems: 'center',border: '0'}} className= {btn_savclass} onClick={(e) => this.AddSave(e,post.Post_Id)}>

                                               </button>
                                            </span>
                                            ):null
                                                     //     ):null
                                        );
                                      })

                                      }
  )

}
export default Dashboard;

在类似按钮的帖子中反应js样式渲染问题

0 个答案: