Каков наилучший способ монтировать компонент, когда вам нужна опора от другого

Question

У меня есть два действия. Иногда значение возвращает undefined, поэтому вместо получения сообщения пользователя я получаю все сообщение. Мне нужно найти лучший способ заставить мои функции работать вместе.

Прямо сейчас у меня есть:

  componentDidMount(){
    this.props.fetchUser();
    let userId = this.props.user.map((user) => (user.id));
    console.log(userId)
    this.props.fetchPostsFromUser(userId);
}

Поскольку он не может сразу получить userId, поэтому он не добавит параметр в конец моего пользовательского поиска, поэтому он даетмне весь пост.

Если я попытаюсь сделать что-то еще, например:

  componentDidMount(){
    this.props.fetchUser();
}
componentWillReceiveProps(){
  let userId = this.props.user.map((user) => (user.id));
  console.log(userId)
  this.props.fetchPostsFromUser(userId);

}

Это будет цикл, дающий мне сообщение, но бесконечный цикл в консоли.

Кроме того, размещение приведенного ниже кода в рендере также сделает его циклом навсегда.

let userId = this.props.user.map((user) => (user.id));
console.log(userId)
this.props.fetchPostsFromUser(userId);

Каков наилучший способ сделать это, чтобы он работал так, как я хочу.

РЕДАКТИРОВАТЬ

export const fetchUser = () => dispatch => {
    Promise.all([fetch('http://10.6.254.22:5000/userinformation/3')])

    .then(([res1]) => { 
       return Promise.all([res1.json()]) 
    })
    .then(([user]) => dispatch ({
      // set state in here
        type: FETCH_USER,
        payload: user
    //   console.log(res1)
    //   this.setState({ results: res1, posts: res2 })
      // this.setState({ posts: res2 })
    }));
}

Answer 1

Вы хотите получать сообщения 1 раз, но не можете сделать это при монтировании, потому что у вас еще нет идентификатора пользователя. Если вы сделаете это в componentWillReceiveProps, вы получите бесконечный цикл - потому что выборка публикаций обновляет реквизиты.

Вам нужно запускать некоторый код при обновлении компонента, но только когда у вас есть идентификатор пользователя и вы этого не сделалиранее есть идентификатор пользователя. componentWillReceiveProps не рекомендуется и не рекомендуется, поэтому мы будем использовать componentDidUpdate, который получает prevProps в качестве первого параметра.

Использование componentDidUpdate :

componentDidUpdate(prevProps) {
  let prevUserId = prevProps.user.map((user) => (user.id));
  let userId = this.props.user.map((user) => (user.id));
  if(!prevUserId && userId) {
    this.props.fetchPostsFromUser(userId);
  }
}

Если выВам интересно, как это может выглядеть при использовании хуков, вот пример:

const userId = props.user.map((user) => (user.id))

React.useEffect(() => {
  if(userId) {
    props.fetchPostsFromUser(userId)
  }
}, [userId])

Хук будет вызываться только тогда, когда userId изменил значение, и будет получать сообщения только при наличии userId