Javascript 反应：使用Axios以便在第二个请求中使用第一个请求中的数据

我有一个API.js文件，用于返回API调用。我需要从第一个API调用返回artistID，以从第二个API调用检索数据。问题是，我需要从两个API检索数据，以便在我的SearchResults组件上显示/呈现数据

---

使用async/await并从第一个API调用的回调内部调用第二个API调用。 我还使用了一个useEffect，它依赖于第一个API调用中的道具，所以我的第二个请求会在钩子更新时触发。如果要使用API调用提取列表，请从第一个API调用的主体获取另一个API调用的URI。希望这有帮助

编辑：OP要求一些代码，所以这里开始。在本例中，我使用fetchData函数通过Axios获取数据，它可以从EventList中的useEffect或CardBody中的useEffect获取调用。事件列表从我的GitHub获取所有事件。在EventList中，我有一个子组件CardBody，它有一个来自events API端点的url字段的属性。因为CardBody内部useEffect的依赖项设置为[props]，每次更改道具时都会运行。我之所以使用此方法，是因为CardBody位于events.map中，它是我从events端点返回的数据

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}/>
)
}

const fetchData=async（查询，uri）=>{
等待axios.get（uri）。然后（res=>{
const dataFromServer=res.data；
查询（dataFromServer）
})
};
const CardBody=props=>{
const[repo，setRepo]=useState（[]）；
useffect（（）=>{
获取数据（setRepo、props.eventRepo）
}[道具]；
返回(
回购：
);
};
常量事件列表=（）=>{
const[event，setEvent]=useState（[]）；
useffect（（）=>{
获取数据（setEvent，“https://api.github.com/users/foestauf/events")
}, []);
返回(
)
}

无法使用async/await？请尝试添加示例代码的文本形式而不是图像，以便其他开发人员可以使用示例代码回答问题。您可以提供示例代码或示例链接吗？更新了我的原始答案，以使用props方法包含代码示例。