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个对象数组，其中包含您所在州的名称和年龄字段。这可以在render组件的Card方法中进行映射，如下所示：

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

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

3 个答案: