Блог

Итак, я, наконец, глубоко погрузился в хуки. Да, теперь я понимаю, насколько простыми они могут быть в использовании. Однако я знаю, что одним из наиболее важных аспектов этого является логика повторного использования. Чтобы разделить перехват между компонентами и сделать мой функциональный компонент (теперь контейнер?) еще чище, как бы мне отделить это? Я понимаю, что могу создать пользовательский хук, если он начинается с use. Итак, например, я хочу получить кучу запросов и получить длину, у меня есть следующее:

 import React, { useState, useEffect } from 'react';
import axios from 'axios';

function TicketCounter() {
    const [data, setData] = useState([]);
    useEffect(() => {
        axios.get(`/ticketapi/ticketslist/`)
            .then(res => {
                if (res.data) {
                    setData(res.data)
                }
            })
    }
        , []);

    return (
        <React.Fragment>
            {data.length}
        </React.Fragment>
    );
}

export default TicketCounter
  

Каков наилучший способ сделать это? Какой метод вы используете? Вы храните эти перехваты внутри своей папки src? Я полагаю, у вас есть папка для перехватов, причем у каждого перехвата есть свой собственный js-файл? В любом случае, заранее спасибо, ребята. Мне очень НРАВИТСЯ react и все, что он может предложить, и я в восторге от хуков (спустя 2 месяца после всех остальных, lol).

Ну, я понял это.

Файл перехвата Sep

 import React, { useState, useEffect } from 'react';
import axios from 'axios';
const useFetchAPI = (url) => {
    const [data, setData] = useState([]);
    useEffect(() => {

        axios.get(url)
            .then(res => {
                if (res.data) {
                    setData(res.data)
                }
            })
    }
        , []);


    return data;
};

export default useFetchAPI
  

и затем мой компонент (контейнер?)

 import React, { useState, useEffect } from 'react';

import useFetchAPI from '../hooks/TicketCounterHook'

function TicketCounter() {
    const url = `/ticketapi/ticketslist/`
    const data = useFetch(url)
    return (
        <React.Fragment>
            {data.length}
        </React.Fragment>
    );
}

export default TicketCounter