Невозможно отобразить значения из Redux Store, хотя хранилище успешно обновляется

Question

Это, наверное, очень простой вопрос.Я создаю приложение, в котором я могу голосовать за или против определенного поста.Все сообщения извлекаются на внутреннем сервере.Чтобы проголосовать за голосование вверх или вниз, я просто отправляю запрос на публикацию с определенным идентификатором, а затем заменяю текущий объект новым объектом с новым значением голосования.

Но все работает отлично.У меня есть промежуточное ПО, которое регистрирует состояние моего магазина, и обновленные данные, кажется, в порядке.Но компонент не показывает правильные значения.

Я пытался использовать mapStateToProps, чтобы получить желаемое свойство и отобразить его, но оно не работает.

У меня есть 2 компонента: сообщения иPost.

внутри компонента Post. У меня есть этот код:

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

    dispatch(getAllPosts());
}

Это заполняет мой редукс.

Затем я использую:

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, как обычно и следовало ожидать.Наличие интервала с этим ключом заставляет их делать это.