Как обновить данные в форме если перезаписался state?

Question

[Martovitskiy]

componentDidMount() {
	this.fetch();
}

fetch = () => {
	this.fetchPermissions();

};

fetchPermissions = () => {
	return api
		.get(`api/test/get`)
		.then(response => {
			this.setState({
				userData: response.data
			});
		})
		.catch(e => {
			this.setState({
				userData: []
			});
		});
}

render() {
	const {
		iconLoading,
		permissions,
		userData
	} = this.state;
	console.log(userData)
	return ( <>
		<Form>
		<Col xs = {24}
		xl = {12}
		className = "__border-right streams_partner_trackers" >
		{
			this.validator(
				'name',
				t('user_name'), <
				Input placeholder = {
					t('enter_user_name')
				}
				size = "large"
				value = {
					userData.user.name
				}
				/>, [{
					required: true,
					message: t('message.field_is_required')
				}])
		} </Form> </>
	)
}

После отработки fetch данные есть в userData, но уже ошибка TypeError: Cannot read property 'user' of undefined. Как правильно отрендерить и подбросить value после fetch?

Comments

[Александр]

Код в <code></code> оберните.

[Martovitskiy]

Александр, спасибо, исправил

[WbICHA]

Martovitskiy, добавь лоадер.

[Martovitskiy]

WbICHA, добавил, проблема не решилась

{isLoading ? (
                    <Loader className="profile__block-loader" show={true}/>
                ) : (
                <Form>
...
                </Form>
                )}

[YavaDev]

Martovitskiy, value = {userData?.user?.name}

[Demian Smith]

Если форма так сильно завист от данных юзера, то можно эти данные фетчить в родительском компоненте и передавать в компонент-форму. В таком случае, форму можно показывать только после того как данные получены. Плюсом к такому подходу будет восможность переиспользовать форму где-то еще. Например, в админке.

[WbICHA]

Martovitskiy, мне тебя учить как лоадер использовать?

Answer 1

[Арслан Абаев]

Сделайте тернарную проверку прям в value

value = {
          userData.user.name ?  userData.user.name : "Loading..."
        }

И после того данные с API прилетят у вас корректно отобразиться userData.user.name