Javascript 从API检索数组并在React中过滤

我已成功调用令牌并将其传递给API端点。但是，我不需要两个对象。我只想处理数组中包含字段的第一个索引。所以我想检索所有的细节并在浏览器中打印出来，但现在所有可以打印的都是ID和类型

我尝试过过滤数据数组，但没有成功

var config = {
    headers: {'Authorization': 'Bearer token'}
};

class App extends React.Component  {

  constructor(props) {
     super(props)
     this.state = {
       data: [],
     }
   }

   componentDidMount() {
     axios.get('https://api.transferwise.com/v1/profiles',config)
       .then(response => {
         if (response.status === 200 && response != null) {
           this.setState({
             data: response.data
           });
         } else {
           console.log('problem');
         }
       })
       .catch(error => {
         console.log(error);
       });
     }

     render() {
       const { data } = this.state;
       return (
         <div >
           {this.state.data.map(object => (
             <p key={object.uid}>{object.id} {object.type}</p>
           ))}
         </div>
       )
     }};

export default App;

var配置={
标头：{'Authorization'：'Bearer token'}
};
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
数据：[]，
}
}
componentDidMount（）{
axios.get（）https://api.transferwise.com/v1/profiles，配置）
。然后（响应=>{
if（response.status==200&&response！=null）{
这是我的国家({
数据：response.data
});
}否则{
console.log（“问题”）；
}
})
.catch（错误=>{
console.log（错误）；
});
}
render（）{
const{data}=this.state；
返回(
{this.state.data.map（对象=>(
{object.id}{object.type}
))}
)
}};
导出默认应用程序；

所以在我看来，您在映射对象中的深度不够。 这意味着您应该访问对象的详细信息部分以获取所需信息

this.state.data.map(object => (
   // The object data structure at this point should look like this
   // {
   //  details: {firstName: 'firstExample', lastName: 'lastExample', ...},
   //  id: 'example'
   //  type: 'personal'
   // } if you console.log(object) you should be able to see it

   {<p key={object.details.id}>{object.details.id} {object.details.type}</p>
))}

this.state.data.map（对象=>(
//此时的对象数据结构应该如下所示
// {
//详细信息：{firstName:'firstExample'，lastName:'lastExample'，…}，
//id:'示例'
//类型：“个人”
//}如果您使用console.log（对象），您应该能够看到它
{
{object.details.id}{object.details.type}
))}

看起来您的数据由一个数组组成，其中每个项目都可以是一个具有不同类型详细信息的对象

要动态渲染每个对象的字段值，可以执行以下操作：

{this.state.data.map(({ id, type, details }) => {
  return (
    <>
      <p key={id}>
        {id} {type}
      </p>

      {Object.keys(details).map((key, index) => (
        <p key={index}>{details[key]}</p>
      ))}
    </>
  );
})}

{this.state.data.map（{id，type，details}）=>{
返回(

{id}{type}

{Object.keys（details）.map（（key，index）=>(
{details[key]}
))}
);
})}

“具有字段的数组中的第一个索引”哪些字段？听起来你在找

数组#find

。嘿，谢谢你的回复，我附上了一个屏幕截图，所以我只想从数组中的第一个对象中检索firstName，例如你想要的

this.state.data

。如果你想让它只是名字，

this.setState（{data:response.data[0].details.firstName}）

。嘿，伙计，谢谢你的回答，在尝试了这个之后，我收到以下对象作为React子对象无效（找到：带有键的对象{名称、注册号、acn、abn、arbn、公司类型、公司名称、业务描述、主要地址、网页、业务类别、业务子类别}）。如果要呈现子对象集合，请改用数组。Hey刚更新以处理嵌套数据结构。请给出一个答案Hey，您的答案完全有道理，但由于大括号问题，我无法进行排序。第36行：您的呈现方法应具有REACH语句react/require render return/or谢谢你的时间，我已经试过了，但是没有打印出来。很抱歉，如果我问的是一些基本的问题，出于某种原因我无法理解