从两个不同的端点获取信息到单个列表项

Question

我有来自父级App组件的数据，该数据正在将两个不同的状态（state.names和state.ages-都是数组）传递到我的卡组件中。 在我的卡片组件中，我想使用此数据来呈现单个卡片列表项（具有每个角色的姓名和年龄）。 我还无法弄清楚如何组合这两个数组。 我已经映射了两者，但我想将名称与相应的年龄相匹配。

卡组件-

import React, { Component } from "react";

class Card extends Component {
  render() {
    const names = this.props.data.names.map(name => {
      return (
        <div key={name.id}>
          <div>{name.first_name}</div>
          //I want the ages to go right here
          </p>
        </div>
      );
    });

    const ages = this.props.data.ages.map(age => {
      return (
        <div>
          <span>{age.number}</span>
        </div>
      );
    });

    return(
      <div className="card">
        {people}
      </div>
      )
  }
}

export default Card;

Answer 1

与其使用两个数组来表示name和age您不应该使用一个person对象数组来在您的州中使用名称和年龄字段。 可以将其映射到Card组件的render方法中，如下所示：

const people= this.props.data.persons.map(person => {
      return (
        <div key={person.id}>
          <div>{person.first_name}</div>
          <div>{person.age} </div>
          </p>
        </div>
      );
    });

Answer 2

您可以向Array.map添加第二个参数，它是Array的索引。 因此，假设names和age是相同的顺序，则看起来这样应该可以工作：

import React, {Component} from "react";

class Card extends Component {
  render() {
    const ages = this.props.data.ages
    const names = this.props.data.names.map((name, idx) => {
        return (
          <div key={name.id}>
            <div>{name.first_name}</div>
            <div>
              <span>{ages[idx].number}</span> 
            </div>
          </div>
        );
      });

    return (
      <div className="card">
        {people}
      </div>
    )
  }
}

export default Card;

但是，必须指出的是，最好将数组在对象内保持在一起，而不是在两个单独的数组中任意排序。 （例如，如果您对年龄数组进行排序，则名称和年龄将不再对应）。

Answer 3

当我从API获取数据时，通常会将列表转换为对象或Map，因此，在存储中它不是数组。

这样，您可以使用一些键将一个数组链接到另一个数组。 在下面的示例中，我将使用对象，因为它更易于演示，但是我个人更喜欢Map而不是纯对象，因为在地图上您可以执行forEach，可以保留原始顺序。 Object.keys（obj）为您提供一个数组，其中包含obj实例的键，按字母顺序排列。

store = {
  users: {
    'aa1001': {
      id: 'aa1001',
      first_name: 'Frank'
    },
    'aa1002': {
      id: 'aa1002',
      first_name: 'John'
    }
  },
  ages: {
    'aa1001': {
      userId: 'aa1001',
      age: 25
    },
    'aa1002': {
      userId: 'aa1002',
      age: 30
    }
  }
}

import React, { Component } from "react";

class Card extends Component {
  render() {
    const {names, ages} = this.props.data;
    const people = Object.keys(names).map(nameKey => {
      return (
        <div key={names[nameKey].id}>
          <div>{name[nameKey].first_name}</div>
          <div>ages[nameKey].age</div>
        </p>
        </div>
      );
    });

    return(
      <div className="card">
        {people}
      </div>
    )
  }
}

export default Card;

我通常会使用自定义函数来转换响应，但是您可以使用的一个很好的工具是normalizr