Как подождать props?

Question

[sema-fedotov]

Есть код вида:

componentDidMount() {
		fetch(`${url}/user_info?user_id=${this.props.fetchedUser.id}`)
			.then(res => { this.user = res.json() })
			.then(
				(result) => {
					this.setState({
						loaded: true,
					});
				},
				(error) => {
					this.setState({
						loaded: true,
						error
					});
				}
			)
	}

Но он не может выполнится из-за ошибки cannot read property 'id' of null
Как мне можно подождать props, чтобы он подставился в ajax запрос?

Answer 1

[Роман Александрович]

или заставить монтироваться компонент уже с готовым id или же ловить его в componentWillReceiveProps
componentWillReceiveProps(nextProps) {
if(nextProps.fetchedUser.id&&this.props.fetchedUser.id!==nextProps.fetchedUser.id){
fetch(`${url}/user_info?user_id=${this.props.fetchedUser.id}`)
      .then(res => { this.user = res.json() })
      .then(
        (result) => {
          this.setState({
            loaded: true,
          });
        },
        (error) => {
          this.setState({
            loaded: true,
            error
          });
        }
      )
  }
}

Comments

[sema-fedotov]

Все та же ошибка появляется

[Роман Александрович]

sema-fedotov,

if(nextProps.fetchedUser&&nextProps.fetchedUser.id&&this.props.fetchedUser.id!==nextProps.fetchedUser.id){
fetch(`${url}/user_info?user_id=${this.props.fetchedUser.id}`)
      .then(res => { this.user = res.json() })
      .then(
        (result) => {
          this.setState({
            loaded: true,
          });
        },
        (error) => {
          this.setState({
            loaded: true,
            error
          });
        }
      )
  }
}

[davidnum95]

componentWillReceiveProps deprecated, его выпялят в 17 версии

[Роман Александрович]

davidnum95, замените на новый метод

[sema-fedotov]

Роман Александрович, id все еще null

[Роман Александрович]

sema-fedotov,

if(nextProps.fetchedUser&&nextProps.fetchedUser.id){
fetch(`${url}/user_info?user_id=${this.props.fetchedUser.id}`)
      .then(res => { this.user = res.json() })
      .then(
        (result) => {
          this.setState({
            loaded: true,
          });
        },
        (error) => {
          this.setState({
            loaded: true,
            error
          });
        }
      )
  }
}

если так будет тоже null тогда

componentWillReceiveProps(nextProps) {
console.log("nextProps",nextProps)
}

и смотрите что за проблема у вас с id

[sema-fedotov]

Роман Александрович, В консоль абсолютно ничего не выводит. Мне кажется, что это из-за функции, я также попробовал UNSAFE_componentWillReceiveProps(nextProps), результатов не дало, и попробовал

componentDidMount() {
		console.log("nextProps", this.props)
	}

Который вывел объект

[davidnum95]

sema-fedotov, componentDidUpdate

[Роман Александрович]

davidnum95 sema-fedotov, , точно не componentDidUpdate
используйте getDerivedStateFromProps
https://ru.reactjs.org/docs/react-component.html#s...

[davidnum95]

Роман Александрович, чаво? getDerivedStateFromProps должна быть чистой функцией без сайд эффектов, а вы предлагаете туда запихнуть асинхронный вызов

[davidnum95]

Роман Александрович,

[Роман Александрович]

davidnum95, а да согласен

[sema-fedotov]

davidnum95, Спасибо, заработало. Правда теперь после перезапуска vk mini app приложения белый экран, приходится кэш каждый раз очищать. Не знаете что тут может быть?

[davidnum95]

sema-fedotov, хз, не сталкивался

[sema-fedotov]

davidnum95, И еще одно "но", сейчас мой код имеет вид:

async componentDidUpdate() {
		const user = await fetch(`${url}/user_info?user_id=${this.props.fetchedUser.id}`, {
			method: "GET" 
		}).then(res => {
			this.setState({
				loaded: true
			})
			return res.json();
		})
		this.user = user
	}

И я заметил, что запросы сыпятся очень часто. Это может же повлиять на нагрузку? Может можно поставить какой то таймаут?

[davidnum95]

sema-fedotov, https://ru.reactjs.org/docs/react-component.html#c...

[sema-fedotov]

davidnum95, Спасибо, условие сделал, как раз пропала проблема с белым экраном. Тогда можно еще вопрос, как можно время от времени подгружать новую информацию, например если данные меняется?

Answer 2

[profesor08]

Ты не передал своему компоненту параметры через пропсы. Передай и все заработает. Используй typescript чтоб не вылезало непонятных вещей.

Comments

[sema-fedotov]

С чего ты взял, что я их не передал? Другого куска кода даже не видно

[profesor08]

sema-fedotov, fetchedUser передан? Если вышла ошибка, значит там null. Проверь на null и убедись что юзер передан.