反应钩子.用于获取使用值的解决方案设置方法后的状态

Question

在使用useState时，我在使用setter方法后经常遇到我想获取变量，并且在设置它后直接在当前方法中不可用，我必须找到其他非程序性的方法，例如useEffect。

有时 useEffect 不是逻辑选择 b/c 依赖关系会导致代码在您不想触发时触发。在下面的示例中，我想在handleDomainChanges中设置FormData，然后在createServices中使用它，但是formData没有使用最新数据进行更新。 在这种情况下，最好的解决方案是什么：

const handleDomainsChange = () => {   
let filteredArr = listArr.filter(el => el.length > 0)
setFormData({
...formData,
domains: filteredArr,
})
}
const createServices = async () => {
handleDomainsChange()
//** formData is not updated from handlDomainsChange function
const services = await responseCallback('postData', 'services', formData) 
services.success && setServices([...services, services.body])
closeServicesModal()
}

我已经尝试了一种解决方法，它有效，但似乎不是一个理想的解决方案，因为我必须将数据与三个传播运算符合并：

const handleDomainsChange = () => {
return { domains: listArr.filter(el => el.length > 0) }
}
const editServices = async () => {
const data = handleDomainsChange()
const res = await responseCallback('putData', `services/${formData.PK}`, {
...formData,
...data,
})
if (res.success) {
const updateServices = services.map(service => {
if (service.PK === formData.PK) {
return { ...formData, ...data, service } //*3 spread operators 
}
return service
})
setServices(updateServices)
}

Answer 1

在尝试解决方法之前，您的第一种情况仍然可以工作。 问题是过滤器将返回和数组，即使它只是一个返回的元素，它也将是这样的数组， 当你做类似的事情时

setFormData({
...formData,
domains: filteredArr,
})

这意味着您正在尝试将 FormData 的扩展旧数据与您从 fitler 获得的数组混合写入。 您也可以只扩展过滤后的数组，它将像您调整的数组一样正常工作，如下所示。

const handleDomainsChange = () => {   
let filteredArr = listArr.filter(el => el.length > 0)
setFormData({
...formData,
...filteredArr,
})
}