在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

如果没有更好的解决方案，我找到的唯一方法就是拆分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 ...
}