时间戳

首页 > 解决方案 > this.setState 不是重新渲染按钮图标

javascript - this.setState 不是重新渲染按钮图标

问题描述

我正在尝试将按钮的类别更改为显示喜欢/不喜欢的图标，但是，即使从 chrome 开发工具观察到状态正在改变，图标似乎也没有改变。

    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 更改按钮图标。

编辑：深入研究后，我发现了问题。我有一个非常棒的 js 文件，它弄乱了渲染。此处发布的所有解决方案都是正确的。

标签： javascriptreactjsreact-redux

解决方案

你可以简单地做同样的事情

<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
    });
};

请尝试相同的方法，如果它不起作用，请告诉我

推荐阅读