Question

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

有时候，useEffect不是逻辑选择，因为当您不希望执行时，依赖原因代码会触发。在下面的示例中，我想在handleDomainChanges中设置setData，然后在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

在尝试解决方法之前，您的第一种情况仍然可行。问题是，即使仅返回一个元素，过滤器也将返回并进行数组设置，当您执行

之类的操作时

final

这意味着您正在尝试将散布的formdata旧数据与从fitler获得的数组混合写入。您还可以散布过滤后的数组，它会像您对下面的内容进行调整那样正常工作。

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

反应钩子。设置方法后获取useState值的解决方案

1 个答案: