Далее JS: правильный способ получения только данных на стороне клиента в функциональном компоненте - PullRequest
Новая
       9

Далее JS: правильный способ получения только данных на стороне клиента в функциональном компоненте

0 голосов
/ 30 марта 2020

У меня есть функциональный компонент. По сути, страница состоит из формы - мне нужно заполнить некоторые существующие данные в форме и позволить пользователю обновить их.

Я использую крючок, который я написал для обработки форм. Что он делает, это 

 const [about, aboutInput] = useInput({
    type: 'textarea',
    name: 'About you',
    placeholder: 'A few words about you',
    initialValue: data && data.currentUser.about,
  })

about - это значение, а aboutInput - это сам фактический элемент ввода. Я тоже могу передать начальное значение.

В начале компонента я получаю данные следующим образом:

const { data, loading, error } = useQuery(GET_CURRENT_USER_QUERY)

Это выполняется только на стороне клиента и на стороне сервера data не определено.

Следовательно, этот код работает только при переходе на страницу через компонент Link с другой страницы на стороне клиента.

Он не работает для:

  1. Когда я go URL-адрес напрямую
  2. Когда я перехожу на эту страницу с другой страницы SSR (которая использует getInitailProps)

Я не хочу использовать методы жизненного цикла / компонент класса (поскольку я использую хуки и хочу продолжать использовать функциональный компонент.

Есть ли хороший способ добиться этого в Next JS и продолжать использовать функциональный компонент?

Ответы [ 2 ]

0 голосов
/ 31 марта 2020

Вы можете получить данные на стороне клиента только с помощью useEffect Hook . 

import {useEffect} from 'react'

useEffect(()=>{

return =>{
 // clean-up functions
 }
},[])

Первый аргумент - это функция, и вы можете выполнять вызовы API внутри этого.

Второй аргумент useEffect будет определять, когда useEffect должно быть , инициируемое . Если вы передадите пустой массив [], то useEffect будет запущен только при монтировании компонента. Если вы хотите, чтобы useEffect срабатывал при изменении какого-либо реквизита, тогда передавайте такие реквизиты как зависимость от массива. 

    useEffect(()=>{
     Make API call and setState
     return =>{
       // clean-up functions
       }
    },[props])

Если вы хотите GET_CURRENT_USER_QUERY из строки запроса, вы можете передать аргумент из getInitailProps и считайте это как реквизиты в зависимости массива useEffect .

0 голосов
/ 30 марта 2020

Я вижу, вы упомянули getInitailProps. Таким образом, вы, вероятно, знаете, что он делает, и его предостережения . Если вы хотите, чтобы данные определялись на стороне сервера, почему бы не использовать getInitailProps на странице, на которой находится форма. Таким образом, вы можете извлечь данные из props и передать их в компонент формы. Это должно сработать либо при прямом посещении URL, либо при посещении других ваших страниц.

...