反应：使用Axios，这样我就可以在第二个请求中使用第一个请求中的数据

Question

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

Answer 1

使用async / await并从第一个的回调内部调用第二个API调用。 我还使用了useEffect和第一个API调用中的props的依赖关系，因此，无论何时更新钩子，我的第二个请求都会触发。如果您要通过API调用提取列表，则很有用，请从第一个API的主体获取URI到另一个API调用。希望这可以帮助！

编辑：OP要求提供一些代码，所以就到这里了。在此示例中，我具有使用Axios捕获数据的fetchData函数，它可以从EventList中的useEffect或CardBody中的useEffect获取调用。 EventList从我的GitHub获取所有事件。在EventList内部，我有CardBody的子组件，该子组件从事件API端点开始支持url字段。由于CardBody中useEffect的依赖项设置为[props]，因此每次更改prop时都会运行。我使用此方法是因为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}/>
)
}