Как я могу использовать хук useQuery для заполнения состояния другими хуками? - PullRequest
Новая
       37

Как я могу использовать хук useQuery для заполнения состояния другими хуками?

1 голос
/ 02 апреля 2019

Недавно я столкнулся с несколькими проблемами, связанными с хуками, так как я внедрял хуки в мой проект.Я продолжаю получать сообщение об ошибке «Отрисовано больше хуков, чем во время предыдущего рендеринга».

Кажется, что единственный способ заставить мой код работать, это поставить хук useQuery после всех других хуков.Однако это является проблемой, поскольку я хочу заполнить некоторые значения состояния значениями из данных в запросе. 

// code that doesn't error, but am not able to initialize state with query values

const [url, setUrl] = useState('')

const updateLink = useMutation(LINK_UPDATE_MUTATION, {
  variables: {
    id: props.id,
    url
  }
})

const { data, loading, error } = useQuery(LINK_QUERY, {
  variables: {
    id: props.id
  }
})

if (loading) {
  return <div>Loading...</div>
}
if (error) {
  return <div>Error! {error.message}</div>
}

против 

// code that errors with 'Rendered more hooks than during the previous render.'

const { data, loading, error } = useQuery(LINK_QUERY, {
    variables: {
      id: props.id
    }
  })

  if (loading) {
    return <div>Loading...</div>
  }
  if (error) {
    return <div>Error! {error.message}</div>
  }

const updateLink = useMutation(LINK_UPDATE_MUTATION, {
    variables: {
      id: props.id,
      url
    }
  })

const [url, setUrl] = useState(data.link.url)

Я ожидаю, что хук useQuery может бытьиспользуется для инициализации других значений данными запроса.

Если этого кода недостаточно, или требуется более подробное объяснение, просто дайте мне знать.Спасибо.

1 Ответ

2 голосов
/ 02 апреля 2019

Что вам нужно сделать, это обновить состояние, когда первая ловушка приводит к ответу.Для этого вы можете использовать useEffect hook.Вам необходимо отобразить все хуки в верхней части функционального компонента. 

const [url, setUrl] = useState('')

const updateLink = useMutation(LINK_UPDATE_MUTATION, {
  variables: {
    id: props.id,
    url
  }
})

const { data, loading, error } = useQuery(LINK_QUERY, {
  variables: {
    id: props.id
  }
})

useEffect(() => {
  if(data && data.link) {
    setUrl(data.link.url);
  }
}, [data])

if (loading) {
  return <div>Loading...</div>
}
if (error) {
  return <div>Error! {error.message}</div>
}
...