Reactjs 映射axios响应，然后将其用于另一个响应

我想映射一个图像数组，但因为Directus将图像或文件标识为集合项中的id

现在我需要从第一个请求中的响应映射id数组，然后使用该id在另一个端点中发出另一个get请求，这里就是文件

我使用的数据库是DirectusCms，前端是react.js

class ComponentToPrint extends React.Component {
  constructor(props) {
    super(props);
    this.handleLoad = this.handleLoad.bind(this);
      this.state = {
        nama: [],
        kk:[],
        ijazah:[]
    };
    }

    componentDidMount() {
        window.addEventListener('load', this.handleLoad);
    }

    componentWillUnmount() { 
      window.removeEventListener('load', this.handleLoad)  
    }
    
    handleLoad() {
      
      let nama_1;
      let id_kk;


      const url = `https://sensor/public/gemaclc/items/pendaftar?access_token=sensor`
      const url2 = `https://sensor/public/gemaclc/files/${id_kk}?access_token=sensor`
      

    axios(url, { 
        method: 'get', 
        headers:{ 'Content-Type': 'application/json'} })
        .then(res => {
            const nama = res.data.data;
            const nama = res.data.data;
            console.log( nama)
            this.setState( {nama} );
          })
    .catch(error => console.error('Error:', error))
    // .then(res => {console.log('Success:', nama)})

    // this.setState( nama );
    // console.log(nama)
    axios(url2,{
      method:`get`,
      headers:{ 'Content-Type': 'application/json'} })
        .then(res => {
            id_kk = res.data.data;
            console.log( id_kk)
            // this.setState( {id_kk} );
          })
        }

  render() {
    return (
      <>
    {this.state.nama.map(node => 
      <div key={node.id}>
      <h2>Nama :{node.nama}</h2>
      <h2>Tanggal lahir : {node.tanggal_lahir}</h2>
      <h2>Tempat lahir : {node.tempat_lahir}</h2>
      <h2>Email : {node.email}</h2>
      <h2>Email : {node.telepon}</h2>
      <h2>kk : {node.kartu_keluarga}</h2>
      </div>
      )}
       
      </>
    );
  }
}

class ComponentToPrint扩展了React.Component{
建造师（道具）{
超级（道具）；
this.handleLoad=this.handleLoad.bind（this）；
此.state={
非农产品市场准入：[]，
kk:[]，
伊扎哈：[]
};
}
componentDidMount（）{
window.addEventListener（'load'，this.handleLoad）；
}
componentWillUnmount（）{
window.removeEventListener（'load'，this.handleLoad）
}
单担{
让nama_1；
让我看看；
常量url=`https://sensor/public/gemaclc/items/pendaftar?access_token=sensor`
常量url2=`https://sensor/public/gemaclc/files/${id\u kk}？访问\u令牌=传感器`
axios（url，{
方法：“get”，
标题：{'Content-Type'：'application/json'}}）
。然后（res=>{
const nama=res.data.data；
const nama=res.data.data；
console.log（nama）
这个.setState（{nama}）；
})
.catch（error=>console.error（'error:'，error））
//.then（res=>{console.log（'Success:'，nama）}）
//这个国家（nama）；
//console.log（nama）
axios（url2{
方法：`get`，
标题：{'Content-Type'：'application/json'}}）
。然后（res=>{
id_kk=res.data.data；
console.log（id_kk）
//this.setState（{id_kk}）；
})
}
render（）{
返回(
{this.state.nama.map（节点=>
Nama:{node.Nama}
Tanggal lahir:{node.Tanggal_lahir}
Tempat lahir:{node.Tempat_lahir}
电子邮件：{node.Email}
电子邮件：{node.telepon}
kk:{node.kartu_keluarga}
)}
);
}
}

从Directus中的

项目

端点请求时，可以提供一个名为

字段

的查询参数，通过该参数，您可以从关系中获取嵌套信息，包括哈希等，请参阅：

如果您有

private

散列，则可以使用

assets

端点获取实际图像，请参阅：

---

PS：你没有提到你的问题是什么，所以我是根据我对这个主题的总体了解猜出来的-下次还要提到你的确切问题，你尝试了什么，什么不起作用等等

当从Directus中的

项

端点请求时，可以提供一个名为

字段

的查询参数，通过此操作，您可以从关系中获取嵌套信息，包括哈希等，请参见：

如果您有

private

散列，则可以使用

assets

端点获取实际图像，请参阅：

附言：你没有提到你的问题是什么，所以我是根据我对这个主题的总体知识猜出来的——下次还要提到你的确切问题，你尝试了什么，什么不起作用等等