React Hooks: передача параметра в пользовательский Hook для динамической установки запроса API-запроса

Question

У меня есть опыт работы с React, но я новичок в использовании хуков. Я работаю над проектом, который получает статистику из API НХЛ. Я создаю сайт, который позволяет пользователям просматривать хоккейную статистику по командам. У меня есть проект, настроенный на React-Router, так что страница статистики каждой команды - это название команды, т. Е. /rangers - это страница New York Rangers, /capitals - это страница Вашингтонских столиц, et c ...

Конечная точка API НХЛ для статистики команды выглядит следующим образом https://statsapi.web.nhl.com/api/v1/teams/3/roster. Число после teams обозначает, какую команду вы ищете. 3 в этом запросе представляет конечную точку New York Rangers. Я создал объект для хранения имен команд и связанных с ними номеров для запроса API, например:

const teams = {
    devils: {
        id: 1
    },
    islanders: {
        id: 2
    },
    rangers: {
        id: 3
    }
}

Я планирую использовать useLocation для получения имени команды из URL, найдите соответствующий номер в указанном выше объекте, а затем передайте этот номер в axios URL-адрес запроса на получение, чтобы получить статистику этой команды.

Например, пользователь переходит на страницу «Островитяне» по адресу /islanders в В моем проекте я затем использую useLocation, чтобы получить /islanders с URL, затем я ищу идентификатор Islanders в объекте и нахожу 2. Затем я хочу передать 2 в запрос axios GET следующим образом:

const [data, setData] = useState([]);

    useEffect(() => {
        axios.get(`https://statsapi.web.nhl.com/api/v1/teams/${teamID}/roster`)
            .then(res => {
                setData(res.data.roster);
                console.log(res);
            })
            .catch(err => {
                console.log('Error : ' + err);
            })
    }, []); 

Как передать переменную teamID в запрос axios? Я пробовал следующее:

 const [data, setData] = useState([]);
const classes = useStyles();

// Get URL from team page user is on
const location = useLocation();
//  '/islanders'
const teamWithSlash = location.pathname;
// Removes /    '/islanders' becomes 'islanders'
const team = teamWithSlash.slice(1, teamWithSlash.length);

useEffect((team) => {
    axios.get(`https://statsapi.web.nhl.com/api/v1/teams/${teams.${team}.id}/roster`)
        .then(res => {
            setData(res.data.roster);
            console.log(res);
        })
        .catch(err => {
            console.log('Error : ' + err);
        })
}, []); 

Я также пытался создать собственный Hook, который позволил бы мне передать ему параметр teamID, но я не мог понять, как заставить это работать. Я могу получить доступ к номеру, который нужно передать в запрос axios, но не могу понять, как динамически передать его в useEffect.

Answer 1

Удалить аргумент из useEffect. Значение team можно получить из закрывающего закрытия.

Также используйте квадратные скобки для доступа к динамическим c свойствам объекта.

useEffect(() => { 
   axios.get(`https://statsapi.web.nhl.com/api/v1/teams/${teams[team].id}/roster`)
        .then(res => {
            setData(res.data.roster);
            console.log(res);
        })
        .catch(err => {
            console.log('Error : ' + err);
        })
}, []);