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

Question

我已经成功地调用了令牌并将其传递给了我的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;

Answer 1

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

要动态呈现每个对象的字段值，您可以执行如下操作：

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

Answer 2

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

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