• НОВОСТИ
• СТАТЬИ
• БЛОГИ
  за неделю неделю назад 2 недели назад за месяц
• ФАЙЛЫ
• ПРЕСС-РЕЛИЗЫ

function Bookmarks({ category }) {
  const [data, setData] = useState([])
  const [error, setError] = useState()

  useEffect(() => {
    fetch(`${endpoint}/${category}`)
      .then(res => res.json())
      .then(d => setData(d))
      .catch(e => setError(e))
  }, [category])

  //JSX на основе данных и состояния ошибки
}

function Bookmarks({ category }) {
  const [data, setData] = useState([])
  const [error, setError] = useState()

  useEffect(() => {
    let ignore = false
    fetch(`${endpoint}/${category}`)
      .then(res => res.json())
      .then(d => {
        if (!ignore) {
          setData(d)
        }
      })
      .catch(e => {
        if (!ignore) {
          setError(e)
        }
      })
      return () => {
        ignore = true
      }
  }, [category])

  //JSX на основе данных и состояния ошибки
}

function Bookmarks({ category }) {
  const [isLoading, setIsLoading] = useState(true)
  const [data, setData] = useState([])
  const [error, setError] = useState()

  useEffect(() => {
    let ignore = false
    setIsLoading(true)
    fetch(`${endpoint}/${category}`)
      .then(res => res.json())
      .then(d => {
        if (!ignore) {
          setData(d)
        }
      })
      .catch(e => {
        if (!ignore) {
          setError(e)
        }
      })
      .finally(() => {
        if (!ignore) {
          setIsLoading(false)
        }
      })
      return () => {
        ignore = true
      }
  }, [category])

  //JSX на основе данных и состояния ошибки
}

function Bookmarks({ category }) {
  const [isLoading, setIsLoading] = useState(true)
  const [data, setData] = useState()
  const [error, setError] = useState()

  useEffect(() => {
    let ignore = false
    setIsLoading(true)
    fetch(`${endpoint}/${category}`)
      .then(res => res.json())
      .then(d => {
        if (!ignore) {
          setData(d)
        }
      })
      .catch(e => {
        if (!ignore) {
          setError(e)
        }
      })
      .finally(() => {
        if (!ignore) {
          setIsLoading(false)
        }
      })
      return () => {
        ignore = true
      }
  }, [category])

  // JSX на основе данных и состояния ошибки
}

data: dataFromCurrentCategory
error: errorFromPreviousCategory

return (
  

    { error ? (
      
Error: {error.message}
    ) : (
      

        {data.map(item => (
          
{item.name}
        ))}
      
    )}
  

Если мы сначала проверим данные, у нас возникнет та же проблема, если второй запрос завершится неудачно. Если мы всегда отображаем и ошибку, и данные, мы также потенциально отображаем устаревшую информацию.

Чтобы это исправить, нам нужно сбросить локальное состояние при изменении категории:

function Bookmarks({ category }) {
  const [isLoading, setIsLoading] = useState(true)
  const [data, setData] = useState()
  const [error, setError] = useState()

  useEffect(() => {
    let ignore = false
    setIsLoading(true)
    fetch(`${endpoint}/${category}`)
      .then(res => res.json())
      .then(d => {
        if (!ignore) {
          setData(d)
          setError(undefined)
        }
      })
      .catch(e => {
        if (!ignore) {
          setError(e)
          setData(undefined)
        }
      })
      .finally(() => {
        if (!ignore) {
          setIsLoading(false)
        }
      })
      return () => {
        ignore = true
      }
  }, [category])

  // JSX на основе данных и состояния ошибки
}

5. Двойной запрос при StrictMode 

Ладно, это скорее мелкая неприятность, чем ошибка, но это определенно застает новых React-разработчиков врасплох. Если ваше приложение обернуто в , React намеренно дважды вызовет ваш useEffect в режиме разработки, чтобы помочь вам найти ошибки, например отсутствующие функции очистки.

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

Бонус: обработка ошибок

Я не включил это в первоначальный список ошибок, потому что у вас возникнет та же проблема с React Query: fetch не отклоняется при ошибках HTTP, поэтому вам придется проверить res.ok и выдать ошибку самостоятельно. .

function Bookmarks({ category }) {
  const [isLoading, setIsLoading] = useState(true)
  const [data, setData] = useState()
  const [error, setError] = useState()

  useEffect(() => {
    let ignore = false
    setIsLoading(true)
    fetch(`${endpoint}/${category}`)
      .then(res => {
        if (!res.ok) {
          throw new Error('Failed to fetch')
        }
        return res.json()
      })
      .then(d => {
        if (!ignore) {
          setData(d)
          setError(undefined)
        }
      })
      .catch(e => {
        if (!ignore) {
          setError(e)
          setData(undefined)
        }
      })
      .finally(() => {
        if (!ignore) {
          setIsLoading(false)
        }
      })
      return () => {
        ignore = true
      }
  }, [category])

  // JSX на основе данных и состояния ошибки
}

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

Запрос данных это просто. Управление асинхронным состоянием — нет.

И здесь на помощь приходит React Query, потому что React Query — это НЕ библиотека для запросов, а менеджер состояний. Поэтому, когда вы говорите, что вам не нужен он для таких простых действий, как получение данных, вы на самом деле правы: даже с React Query вам нужно написать тот же fetch, что и раньше.

Но вам все равно нужен React Query, чтобы как можно проще сделать это состояние предсказуемым и доступным в вашем приложении. Потому что, будем честны, я не писал этот флаг ignore до того, как начал использовать React Query, и, вероятно, вы тоже.

С React Query код выше превращается в:

function Bookmarks({ category }) {
  const { isLoading, data, error } = useQuery({
    queryKey: ['bookmarks', category],
    queryFn: () =>
      fetch(`${endpoint}/${category}`).then((res) => {
        if (!res.ok) {
          throw new Error('Failed to fetch')
        }
        return res.json()
      }),
  })

  // JSX на основе данных и состояния ошибки
}

Это около 50% спагетти-кода, приведенного выше, и примерно столько же, сколько было в исходном фрагменте с ошибками. И да, это автоматически устраняет все ошибки, которые мы обнаружили:

Баги

• Гонка состояний отсутствует, поскольку состояние всегда сохраняется по входным данным (category).

• Вы сразу получаете состояния загрузки, данных и ошибок.

• Пустые состояния четко разделены и могут быть улучшены с помощью таких функций, как PlaceholderData.

• Вы не получите данные или ошибки из предыдущего запроса, если только вы этого не захотите.

• Множественные выборки эффективно устраняются, включая те, которые исполняются из-за StrictMode.

Итак, если вы все еще думаете, что вам не нужен React Query, я предлагаю вам попробовать его в своем следующем проекте. Могу поспорить, что вы не только получите код, более устойчивый к крайним случаям, но и более простой в эксплуатации и расширении. И как только вы почувствуете все его возможности, вы, вероятно, никогда не оглянетесь назад.

Бонус: Отмена запроса

Многие в Твиттере упомянули об отсутствующей отмене запроса в исходном примере. Я не думаю, что это обязательно ошибка — просто отсутствующая функция. React Query также предлагает довольно простое решение:

function Bookmarks({ category }) {
  const { isLoading, data, error } = useQuery({
    queryKey: ['bookmarks', category],
    queryFn: ({ signal }) =>
      fetch(`${endpoint}/${category}`, { signal }).then((res) => {
        if (!res.ok) {
          throw new Error('Failed to fetch')
        }
        return res.json()
      }),
  })

  //JSX на основе данных и состояния ошибки
}

Просто возьмите signal, который вы получаете в queryFn, направьте его в запрос, и запросы будут автоматически прерываться при изменении категории.

На этом всё, вы можете поддержать автора оригинала статьи в твиттере. Это мой первый перевод, поэтому если у вас есть вопросы по оформлению или содержанию статьи пишите в комментариях.

Habrahabr.ru прочитано 6570 раз