Почему мои действия вызывают изменение реквизита?

Question

У меня есть компонент, который отображает полученную публикацию, и другой, который отображает публикацию, опубликованную пользователями. Мое действие захватывает публикацию в зависимости от того, какую вкладку они нажимают. Ниже приведены действия.

import {  FETCH_POSTS_RECEIVED  } from './types';



export const fetchPostReceived = (id) => dispatch => {
    fetch('/posts/vh5given/' + id , {
        method: 'GET',
        headers: {
            'content-type' : 'application/json'
        }
    })
    .then(res => res.json())
    .then(userPosts => dispatch ({
        type:FETCH_POSTS_RECEIVED,
        payload: userPosts
    }));
    // .then(data = console.log(data));
  }

export const fetchPostsFromUser = (id) => dispatch => {
  fetch('/posts/' + id , {
      method: 'GET',
      headers: {
          'content-type' : 'application/json'
      }
  })
  .then(res => res.json())
  .then(posts => dispatch ({
      type:FETCH_POSTS_FROM_USER,
      payload: posts
  }));
  // .then(data = console.log(data));
}

Их функция вызывается при ComponentDidUpdate

componentDidUpdate(prevProps) {
    // console.log(prevUserId);
    let prevUserId = prevProps.user.map((user) => (user.id));
    let userId = this.props.user.map((user) => (user.id));
    if(prevUserId.length < 1 || prevUserId == undefined && userId) {
      console.log("Currently Updating from vh5");
      console.log(prevUserId);
      console.log(userId);
    this.props.fetchPostReceived(userId);
    }
  }

componentDidUpdate(prevProps) {
  // console.log(prevUserId);
  let prevUserId = prevProps.user.map((user) => (user.id));
  let userId = this.props.user.map((user) => (user.id));

  if(prevUserId.length < 1 || prevUserId == undefined){console.log('undefineeeeed')}
  if(prevUserId.length < 1 || prevUserId == undefined && userId) {
    console.log("Currently Updating");
    console.log(prevUserId);
    console.log(userId);
    this.props.fetchPostsFromUser(userId);

    console.log('this is the props ' + this.props.posts)
  }
}

Проблема, с которой я столкнулся, заключается в том, что реквизиты меняются при вызове функции Fetch Post Received. Поскольку я обновляю сообщения из состояния реквизита при его обновлении, отображаются неправильные сообщения.

Почему это происходит и как я могу это исправить?

Answer 1

Я не могу добавить комментарий, но вы дважды вызываете componentDidMount (это то, что предлагает ваш код), или это две отдельные вещи, которые вы пробовали, потому что

  let prevUserId = prevProps.user.map((user) => (user.id));
  let userId = this.props.user.map((user) => (user.id));

или

    this.props.fetchPostsFromUser(userId);

двойной выстрел может быть вашей проблемой.