时间戳

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

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

问题描述

在使用 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)
}

标签： reactjsreact-hooks

解决方案

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

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

这意味着您正在尝试将 formdata 的传播旧数据与您从 fitler 获得的数组混合。您也可以只传播过滤后的数组，它会像您调整如下所示的那样正常工作。

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

推荐阅读