Реакция: Использование Ax ios, чтобы я мог использовать данные из моего первого запроса во втором - PullRequest
Новая
       9

Реакция: Использование Ax ios, чтобы я мог использовать данные из моего первого запроса во втором

2 голосов
/ 26 апреля 2020

У меня есть файл API. js, который я использую для возврата вызова API. Мне нужно вернуть ArtistID из первого вызова API, чтобы получить данные из второго вызова API. Проблема в том, что мне нужно извлечь данные из обоих API, чтобы отобразить / отобразить данные в моем компоненте SearchResults.

SearchConcert Component

API.js file

SearchResults Component

1 Ответ

1 голос
/ 26 апреля 2020

Используйте async / await и вызовите второй вызов API изнутри обратного вызова первого. Я также использовал useEffect с зависимостью реквизитов от первого вызова API, поэтому мой второй запрос срабатывает каждый раз при обновлении ловушки. Полезно, если вы извлекаете список с помощью вызова API, захватите URI для другого вызова API из тела первого. Надеюсь это поможет!

Редактировать: OP запросил некоторый код, так что здесь. В этом примере у меня есть функция fetchData, собирающая данные с помощью Ax ios, она может получить вызов из useEffect в EventList или useEffect в CardBody. EventList захватывает все события из моего GitHub. Внутри EventList у меня есть дочерний компонент CardBody, который имеет подпорку поля url из конечной точки API событий. Поскольку зависимость useEffect внутри CardBody установлена ​​в [props], он будет запускаться каждый раз при смене реквизита. Я использую этот метод, потому что CardBody находится внутри файла events.map, который представляет собой данные, которые я получаю от конечной точки событий. 


const fetchData = async (query, uri) => {
    await axios.get(uri).then(res => {
        const dataFromServer = res.data;
        query(dataFromServer)
    })
};
const CardBody = props => {
    const [repo, setRepo] = useState([]);
    useEffect(() => {
        fetchData(setRepo, props.eventRepo)
    }, [props]);

    return (
        <div>
            Repo: <a href={repo.html_url}>{repo.name}</a>
        </div>
    );
};

const EventList = () => {
    const [event, setEvent] = useState([]);
    useEffect(() => {
        fetchData(setEvent, "https://api.github.com/users/foestauf/events")
    }, []);


    return (
<CardBody eventRepo={id.repo.url}/>
)
}
...