Реактивные крючки.Решения для получения значения useState после установки метода - PullRequest
Новая
       3

Реактивные крючки.Решения для получения значения useState после установки метода

0 голосов
/ 26 сентября 2019

При использовании useState я часто сталкиваюсь после того, как использую метод setter, я хочу получить переменную, и она не доступна в моем текущем методе непосредственно после его установки, и мне нужно найти другие способы, которые не являются процедурными для использования, например useEffect.

Иногда useEffect не является логическим выбором, поскольку код / ​​зависимость вызывают код, когда вы этого не хотите.В приведенном ниже примере я хочу установитьFormData в handleDomainChanges, а затем в createServices, чтобы использовать его, но формаData не была обновлена ​​с последними данными.Что является лучшим решением в этом случае: 

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

1 Ответ

1 голос
/ 26 сентября 2019

Прежде чем попробовать обходной путь, ваш первый случай все еще может работать.проблема в том, что фильтр будет возвращать и массивировать, даже если будет возвращен только один его элемент, и будет массив как таковой. Когда вы делаете что-то вроде 

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

, это означает, что вы пытаетесь написать смесьраспространять старые данные formdata с массивом, который вы получили от сборщика.Вы также можете просто распределить отфильтрованный массив, и он будет работать так же хорошо, как тот, который вы настроили, как показано ниже. 

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