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

如果没有人有更好的解决方案，我发现的唯一方法是将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 ...
}

Answer 3

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 ...
}

在setState之后反应钩子提交表单

3 个答案: