Строка запроса не добавляется в API, если в React дважды щелкнуть поиск

Question

Моя строка запроса генерируется правильно, но не добавляется в API, если я дважды не нажму кнопку поиска.После первого первого клика поиск работает нормально каждый раз.Если я не перезагрузить страницу.То же самое верно, если для поиска используется другой вход.

Как вы можете видеть в консоли.Входные данные определяются в форме поиска.

Первый щелчок ..

SearchForm.js:26 IDXT001 2222
API.js:8 The query string is undefined

Второй щелчок ..

API.js:8 The query string is filter=IDXT001|2222

Это проблема с синхронизацией?Кажется странным, что он работает нормально после каждого последующего щелчка.

Api ..

search: function(query) {
console.log("The query string is " + query)
return axios.get("http://api/document?" + query );
},

Метод ..

 loadContracts = (query) => {
  API.search(query)
  .then(res => {
    const contracts = res.data;
    this.setState({ contracts })
  })
  .catch(err => console.log(err));
};

Кнопка подтверждения ..

 handleFormSubmit = event => {
event.preventDefault();

const formData = this.state.formValues
let keys = Object.keys(formData);

keys.map(k => {
  let query = '';
  if (query !== "")
  query += `&`;
  query += `filter=`
  query += `${k}|${formData[k]}`

  this.setState({query}) ; 
  return this.loadContracts(this.state.query);
})
};

EDIT Не работает нормально каждый раз после первого щелчка.Если я изменю значение данных после первого клика, предыдущее значение будет добавлено в API.Так что это определенно проблема времени.Я предполагаю, что строка запроса добавляется в состояние после первого клика, а затем отправляется в API при следующем клике.Поэтому мне нужно изменить код так, чтобы строка запроса была непосредственно добавлена ​​в функцию loadcontracts или иметь .then перед отправкой в ​​состояние и затем возвращает loadContracts ()?

Answer 1

Проблема была в том, что у меня был метод loadContracts = (query) над handleFormSubmit. Таким образом, поскольку реакция сверху вниз, строка запроса застряла в состоянии с первого щелчка и не добавлялась в loadContracts = (запрос) до второго щелчка. Вот как я это вижу в любом случае. Поправьте меня если я ошибаюсь.