根据第一个 api React js 的响应从第二个 api 获取数据

Question

我打算在我的反应项目中使用来自第一个 api 的数据调用第二个 api 我尝试使用单个 useState 并使用 axios 来链接承诺，但似乎基本上想过滤掉数据第二个 api 基于第一个 api id 值

Api 1

[{
    id: 01,
    title: Post title One,
    external_id: 101
},
{
    id: 02,
    title: Post title Two,
    external_id: 102
},
{
    id: 03,
    title: Post title Three,
    external_id: 103
}]

Api 2

[{
    id: 101,
    image: Image Url,
},
{
    id: 102,
    image: Image Url,
},
{
    id: 103,
    image: Image Url,
}]

我希望它们并排工作，然后将它们作为道具传递，以根据来自两个 API 的数据呈现项目。 这是我尝试过的，我知道这段代码不正确，但我被困在这里。 这是我的反应代码

const App = () => {

    const [posts, setPosts] = useState([]);
    const [postsExternal, setPostsExternal] = useState([]);


    useEffect(() => axios.get(`http://localhost:2000/posts`)
    .then(response => {
        setPosts(response.data);
        return response.data.external_id;
    })
    .then(getExternalId => axios.get(`http://localhost:2000/posts/${getExternalId}`))
    .then(response => {
        setPostsExternal(response.data);
    }), []);


    return (
        <div>
            <Posts posts={posts} postsExternal={postsExternal}/>
        </div>
    )
}

export default App

Answer 1

是的。

我已经阅读了您的代码，问题是您的代码排列有点错误。 还因为您正在获取一个数据数组，并且您需要使用 external_id 对该数组中的每个数据进行调用

我建议你尝试不同的方法。 试试下面的代码片段。 我以一种我觉得可能更好理解的方式写了它。

谢谢你。

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



const YourApp = () => {
  const [posts, setPosts] = useState([]);
  const [postsExternal, setPostsExternal] = useState([]);

 
  useEffect(() => {
    // not adding .catch() here for simplicity 😎

    axios.get(`http://localhost:2000/posts`).then(({ data }) => {
      // we're putting this here because we only want to set state once (we don't wanna have to rerender 30times in data.map())
      let externalPosts = [];
      // destructed out the {data}, same as response.data, so no worries 👍
      setPosts(data);
      console.log(data);
      // this is where you'll make your second API calls using the external_id from first call
      data.map(({ external_id }) => {
        // {external_id} same as your-param-name.external_id
        axios
          .get(`http://localhost:2000/posts/${external_id}`)
          .then(({ data }) => {
            // we push the data into the array 📃
            console.log(data);
            externalPosts.push(data);
          });

        // then finally set the external post states once to prevent multiple rerendring in .map() 💯
        setPostsExternal(externalPosts);
        // that's it 😎
      });
    });

    // tho, i'd recommend you create a seperate function for the above 👆
  }, []);

  return (
    <div>
      <Posts posts={posts} postsExternal={postsExternal} />
    </div>
  );
};

export default YourApp;

让我知道这是否有帮助。 快乐编码！

Answer 2

你得到一个数组而不是一个单独的 object。 修改useEffect以使用Promise.all()调用 API：

useEffect(() => {
    axios.get(`http://localhost:2000/posts`)
    .then(response => {
        setPosts(response.data);
        return response.data.map(({external_id}) => external_id);
    })
    .then(externalIds => {
     return Promise.all(externalIds
                   .map(externalId => axios.get(`http://localhost:2000/posts/${externalId}`)))
    })
    .then(response => {
        setPostsExternal(response.data);
    }), 
}, []);