FeST1VaL
@FeST1VaL
Тихий

Как лучше обновлять данные из API?

Добрый вечер, я недавно начал заниматься изучением ReactJS и возникли вопросы...

Когда я открываю страницу, я получаю данные через componentDidMount, но когда перехожу по ссылке(роутера) на другую страницу этого же компонента, то тогда данные обновляются с помощью componentDidUpdate... так вот вопрос... Когда я перешел на страницу, то componentDidUpdate постоянно запрашивает данные... как мне запросить данные только 1 раз? Единственное что я пока что придумал это проверять URL, но может есть более элегантное решение?

constructor(props) {
		super(props);
		this.state = {
			module: [],
			materials: []
		};
	}

	getData() {
		var name = this.props.name;

		axios.post('/api/modules/'+ name, {
			'jsonrpc': '2.0'
		})
		.then(response => {
			this.setState({ module: response.data.result, materials: response.data.result.materials });
		})
		.catch(function (error) {
		});
	}

	componentDidMount() {
		this.getData();
	}

	componentDidUpdate(prevProps) {
		if (this.props.match.params.name !== prevProps.match.params.name) {
			this.getData();
		}
	}
  • Вопрос задан
  • 403 просмотра
Решения вопроса 1
alex_keysi
@alex_keysi
Помог с решением? Отметь “правильный ответ”
Сделать флаг isNeedUpdate можно сделать.
Может для роута нужно данные подгрузить новые. Поэтому это норма постоянно запрашивать новые данные. Если не норма, то я бы запрашивал данные, только тогда когда я точно уверен что они могут обновиться и нужны данные новые для компонента, который появится по Роуту.
Так я часто на проектах видел что данные кешируют. Если в функцию getData не приходит forceUpdate , то смотрится кеш стора.
Почему в роут не вынести запрос этот? Пускай он сам грузит необходимые себе данные.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 3
@napa3um
Используйте единое хранилище состояния вашего приложения - redux.
Ответ написан
Комментировать
@Dozalex
Senior Frontend Developer
Почитайте про жизненный цикл компонента, на хабре есть несколько хороших статей. То, что вы делаете, нужно делать на через componentDidUpdate.
Ответ написан
Комментировать
@vladislavtaranow
Может начать с основ
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы