Question

这可能是一个非常简单的问题。我正在创建一个应用，可以在某个帖子上投票或反对票。所有帖子都在后端服务器中获取。要进行投票或否决，我只是发送带有特定ID的发布请求，然后用具有新投票值的新对象替换当前对象。

但是，一切都很好。我有一个中间件来记录我的商店状态，并且更新的数据似乎还可以。但是该组件显示的值不正确。

我尝试使用mapStateToProps获取我想要的属性并显示它，但它不起作用。

我有2个组成部分：帖子和帖子。

在Post组件内部，我有以下代码：

componentDidMount(){
    const { dispatch } = this.props

    dispatch(getAllPosts());
}

这会填充我的redux。

然后我用：

const mapStateToProps = (state, ownProps) => {
   return {
    posts: state.posts
   }
}
export default connect(mapStateToProps)(Posts);

最后，我在render（）中创建了每个帖子：

render() {
    const { posts } = this.props;

    return (
     <div>
        {
          posts !== undefined && (
            posts.map(post => (
              console.log('sending this post: ', post),
              <Post post={post}></Post>
            ))
          )
        }
      </div>
    )
  }
}

该帖子然后接收该道具并渲染每个帖子：

 render() {
    const { post } = this.props;
      return (
        <div className="postArea">
            <i className="far fa-trash-alt iconTop"></i><i 
className="fas fa-edit iconTop"></i>
            <p style={{textAlign: 'left'}}>{post.body}</p>
            <div className="bottomPost">
            <i className="far fa-thumbs-up iconBottom" onClick={this.handleLike} name="upVote"></i><i onClick={this.handleLike} name="downVote" className="far fa-thumbs-down iconBottom"></i>{post.voteScore}
            <span className="commentsIndicator"> {post.commentCount} Comments     </span>
           </div>
        </div>
    )
  }

这是我单击“喜欢”或“不喜欢”按钮时触发的功能：

handleLike = (e) => {

    const { id } = this.state
    const { handleLikeThunk } = this.props;

    if(e.target.getAttribute('name') === 'upVote'){
      handleLikeThunk(id, 'upVote');

    }
    if(e.target.getAttribute('name') === 'downVote'){
      handleLikeThunk(id, 'downVote');

    }

  }

但是，当我单击任一按钮时。什么也没发生（即使记录器中间件显示商店已更新），当我重新加载页面时，类似计数显示正确的数字。当我单击它时，它只是没有即时显示。

有人可以帮我吗？

Answer 1

尝试一下，过去使用FontAwesome和React时遇到了同样的问题。使用Math.Random（）键将图标环绕在一个范围内：

<span key={Math.random()}>
    <i className="far fa-thumbs-up iconBottom" onClick={this.handleLike} name="upVote"></i>
</span>

为什么？因为svgs（Font Awesome用于其图标的图标）不会像人们通常期望的那样在虚拟DOM上自动重新呈现。具有该键的跨度会迫使他们这样做。

即使存储已成功更新，也无法显示Redux存储中的值

1 个答案: