this.setState не перерисовывает значок кнопки

Question

Я пытаюсь изменить класс моей кнопки, чтобы отображать значки типа «нравится / не нравится», однако, даже когда состояние изменяется при наблюдении с помощью инструмента Chrome Dev, значок, похоже, не меняется.

    import React, { Component } from "react";
    import { connect } from "react-redux";
    import classnames from "classnames";
    import { addLikeToPost } from "../../../actions/postActions";
    import TextFieldGroup from "../../common/TextFieldGroup";

    class Postpanel extends Component {
      constructor(props) {
        super(props);
        this.state = {
          isliked: this.props.post.isLiked
        };
      }

      toggleBox = () => {
        this.props.toggleCommentBox(this.props.index);
      };

      addLike = () => {
        this.props.addLikeToPost(this.props.post._id);
        this.setState(prevState => ({
          isliked: !prevState.isliked
        }));
      };

      render() {
        const likeIcon = this.state.isliked == true ? "fa fa-thumbs-up" : "fa fa-heart";

        return (
          <div className="card mb-4 hidden-md-down">
            <div className="card-footer">
              <div className="row">
                <div className="col-xs-6 col-sm-6 col-md-6">
                  <div className="text-center">
                    <button className="btn btn-pill btn-secondary" onClick={this.addLike}>
                      <i className={likeIcon} /> Like
                    </button>
                  </div>
                </div>
                <div className="col-xs-6 col-sm-6 col-md-6">
                  <div className="text-center">
                    <button className="btn btn-pill btn-secondary" onClick={this.toggleBox} type="button">
                      <i className="fa fa-comment-o" aria-hidden="true" /> Comment
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        );
      }
    }

    const mapStateToProps = state => ({
      auth: state.auth,
      errors: state.errors
    });

    export default connect(
      mapStateToProps,
      { addLikeToPost }
    )(Postpanel);

Я пытаюсь изменить значок кнопки с помощью likeIcon const.

edit: После копания я обнаружил проблему.У меня был потрясающий JS-файл, который мешал с рендерингом.Все решения, размещенные здесь, верны.

Answer 1

Не похоже, что вам нужно использовать state в этом случае.Просто используйте props, которые передаются в:

import React, { Component } from "react";
import { connect } from "react-redux";
import classnames from "classnames";
import { addLikeToPost } from "../../../actions/postActions";
import TextFieldGroup from "../../common/TextFieldGroup";

class Postpanel extends Component {

  toggleBox = () => {
    this.props.toggleCommentBox(this.props.index);
  };

  addLike = () => {
    this.props.addLikeToPost(this.props.post._id);
  };

  render() {
    const likeIcon = this.props.post.isLiked == true ? "fa fa-thumbs-up" : "fa fa-heart";

    return (
      <div className="card mb-4 hidden-md-down">
        <div className="card-footer">
          <div className="row">
            <div className="col-xs-6 col-sm-6 col-md-6">
              <div className="text-center">
                <button className="btn btn-pill btn-secondary" onClick={this.addLike}>
                  <i className={likeIcon} /> Like
                </button>
              </div>
            </div>
            <div className="col-xs-6 col-sm-6 col-md-6">
              <div className="text-center">
                <button className="btn btn-pill btn-secondary" onClick={this.toggleBox} type="button">
                  <i className="fa fa-comment-o" aria-hidden="true" /> Comment
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

const mapStateToProps = state => ({
  auth: state.auth,
  errors: state.errors
});

export default connect(
  mapStateToProps,
  { addLikeToPost }
)(Postpanel);

Затем ваш редуктор должен установить сообщение на isLiked=true.

Answer 2

Первоначально я установил бы значение false:

this.state = {
  isliked: false
};

Я бы изменил addLike на handleLike, чтобы вы могли переключаться между истиной и ложью в зависимости от существующего состояния:

handleLike = () => {
  this.props.addLikeToPost(this.props.post._id);
  this.setState({ isliked: !this.state.isliked });
}

и просто измените кнопку на:

<button className="btn btn-pill btn-secondary" onClick={this.handleLike}>

Answer 3

Вы можете просто сделать то же самое, что и

<i className={'fa ' + (this.state.isliked ? 'fa-thumbs-up' : 'fa-heart')} />

, а также изменить метод addLike следующим образом

addLike = () => {
    this.props.addLikeToPost(this.props.post._id);
    this.setState({
        isliked: !this.state.isliked
    });
};

Пожалуйста, попробуйте то же самое и дайте мне знать, если он не работает