Реагировать на форму отправки после setState

Question

Использование нового react hooks. Как вы обновляете состояние, а затем отправляете форму.

Пример: у меня есть окно поиска, в котором используется нормальное состояние с setSearch, и при отправке он получает данные на сервере. У меня также есть history поисков, и если пользователь нажимает на него, он должен заполнить поиск и затем отправить форму.

const Search = () => {
   const [search, setSearch] = useState('')

   const onSubmit = () =>{
      fetch('http://server.com/?search='+search)...
   }

   const onClickShortcut = (shortcutSearch) =>{
      setSearch(shortcutSearch)
      onSubmit()
   }

   return ...
}

Когда я нажимаю кнопку с onClickShortcut, она запускает onSubmit, но поиск идет неправильно ... есть обратный вызов на setState или что-то в этом роде?

Answer 1

Вы можете использовать ловушку React useEffect, чтобы добавить какой-то обратный вызов для изменения состояния.

import React, {useState} from 'react';

const Search = () => {
   const [search, setSearch] = useState('')

   const onSubmit = () =>{
      fetch('http://server.com/?search='+search)...
   }
   useEffect(()=>{ // this will re run every time search changes
      if(search!=='') onSubmit()
   }, [search])

   const onClickShortcut = (shortcutSearch) =>{
      setSearch(shortcutSearch)
   }

   return ...
}

Answer 2

setSearch не является синхронным, и значение будет обновляться через некоторое время асинхронно

Вам необходим хук useEffect(), чтобы определить, изменилось ли значение

const Search = () => {
   const [search, setSearch] = useState('')

   const onSubmit = () =>{
      fetch('http://server.com/?search='+search)...
   }

   const onClickShortcut = (shortcutSearch) =>{
      setSearch(shortcutSearch);
   }
   useEffect(() => {
      // this will trigger when search will get updated
      onSubmit()
   }, [search]);

   return ...
}

Answer 3

Если ни у кого нет лучшего решения, я нашел единственный способ отделить onSubmit, см. Ниже:

const Search = () => {
   const [search, setSearch] = useState('')

   const onSubmit = () =>{
      doSearch(search)
   }

  const doSearch = (searchStr) =>{
    fetch('http://server.com/?search='+searchStr)...
  }

   const onClickShortcut = (shortcutSearch) =>{
      setSearch(shortcutSearch)
      doSearch(shortcutSearch)
   }

   return ...
}