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

Question

我已成功调用并将 token 传递到我的 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>
      ))}
    </>
  );
})}