Комбинирование свойств рендеринга и хуков - PullRequest
Новая
       3

Комбинирование свойств рендеринга и хуков

0 голосов
/ 14 июля 2020

Я реализовал ловушку useFtech, которая выглядит так: 

import { useState, useEffect}  from 'react'

const useFetch = (url) => {
    const [ state, setState ] = useState({ isLoading: true, data: null, error: null });

    useEffect(() => {
        fetch(url)
            .then((resp) => resp.json())
            .then((result) =>
                setState({
                    data: result.message,
                    isLoading: false
                })
            )
            .catch((error) =>
                setState({
                    error,
                    isLoading: false
                })
            );
    }, []);
    return state;
  };

export default useFetch

Позволяет мне выполнять вызовы API без необходимости переписывать этот logi c, вот компонент, в котором я использую этот хук useFetch 

import React from 'react';
import loader from '../loader.svg';
import useFetch from "../components/useFetch";

function DogsHoundList() {
    const url = 'https://dog.ceo/api/breed/hound/images/random/15';
    const {data, isLoading} = useFetch(url)

    return (
        <div>
            { isLoading ?  <img src={loader} alt="loader" /> :data.map((dog, index) => (
                <div key={dog} >
                    <img src={dog} alt={`${dog}-${index}`} />
                </div>
            ))}
        </div>
    );
}

export default DogsHoundList

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

import loader from '../loader.svg';
import useFetch from './useFetch';

export default function FetchData(props) {
    
    const {isLoading, data} = useFetch(props.url)

    return <div>{isLoading ? <img src={loader} alt="loader" /> : props.render(data)}</div>;
}

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

<FetchData render={(data) => <DogList data={data}/>} url='https://dog.ceo/api/breed/hound/images/random/15' />

учитывая тот факт, что я комбинирую хуки и рендеринг реквизита, мне интересно, есть ли что-то не так с этим подходом, поскольку в документации React указано, что у вас могут быть случаи, когда вы в конечном итоге комбинируете эти методы, но в большинстве случаев хуки будут быть достаточным. Я хотел бы знать, хороший ли это случай для объединения хуков и рендеринга реквизита, или могло бы быть лучше также абстрагироваться от условного состояния "isLoading", которое применяется ко всем запросам API, без необходимости использовать шаблон рендеринга. .

...