Как просмотреть свойства объектов внутри массива внутри компонента React?

Question

Вот функция рендеринга моего родительского компонента:

  render() {
    const users = [
      'tom': {
        phone: '123',
        email: 'hotmail'
      },
      'rob': {
        phone: '321',
        email: 'yahoo'
      },
      'bob': {
        phone: '333',
        email: 'gmail'
      },
    ];

    const list = users.map((user) =>
      (<User
        name={user}
        phone={users.phone}
        email={users.email}
      />),
    );

    return <ul>{list}</ul>;
  }

Вывод отображается так:

А вот функция рендеринга дочернего компонента:

  render() {
    const {
      name,
      phone,
      email,
    } = this.props;

    const info = [name, phone, email];

    const item = info.map((index) => (
      <li key={index}>
        { index }
      </li>
    ));

    return item;
  }

Как я могу показать это вместе с номерами телефонов и электронными письмами? Не уверен, что я делаю неправильно. Спасибо.

Answer 1

Ваши постоянные пользователи должны быть изменены для отображения через них.

 const users = [
            {
            name: 'tom',
            phone: '123',
            email: 'hotmail',
          },
          {
            name:'rob',
            phone: '321',
            email: 'yahoo'
          },
          {
            name: 'bob',
            phone: '333',
            email: 'gmail'
          },
    ];
    const list = users.map((usr =>
      (<User
        name={usr.name}
        phone={usr.phone}
        email={usr.email}
      />),
    );

    return <ul>{list}</ul>;
  }

Answer 2

Одним из решений является изменение вашего «списка» на фактический список:

const users = [
  {
    name: 'tom',
    phone: '123',
    email: 'hotmail'
  },
  {
    name: 'rob,
    phone: '321',
    email: 'yahoo'
  },
  {
    name: 'bob',
    phone: '333',
    email: 'gmail'
  },
];

Теперь пользователь user.name вместо user.

В качестве альтернативы, создайте объект с ключами по именам каждого пользователя:

const users = {
  'tom': {
    phone: '123',
    email: 'hotmail'
  },
  'rob': {
    phone: '321',
    email: 'yahoo'
  },
  'bob': {
    phone: '333',
    email: 'gmail'
  },
};

Затем сопоставьте ключи:

const list = Object.keys(users).map((user) =>
  (<User
    name={user}
    phone={users[user].phone}
    email={users[user].email}
  />),
);

Answer 3

Вы должны ссылаться на «пользователя» вместо «пользователей» внутри функции карты родительского компонента. Назначение переменной user - представить текущий экземпляр каждого элемента в массиве. Таким образом, функция карты должна выглядеть так:

const list = users.map((user) =>
  (<User
    name={user}
    phone={user.phone}
    email={user.email}
  />),
);

вместо.

Answer 4

Во-первых, users не является допустимым массивом. Если вы хотите, чтобы пара ключ-значение находилась в основной области, используйте Object ({})

 render() {
        const users = {
          'tom': {
            phone: '123',
            email: 'hotmail'
          },
          'rob': {
            phone: '321',
            email: 'yahoo'
          },
          'bob': {
            phone: '333',
            email: 'gmail'
          },
        };

        const list = Object.keys(users).map((user) =>
          (<User
            name={user}
            phone={users[user].phone}
            email={users[user].email}
          />),
        );

        return <ul>{list}</ul>;
      }

Answer 5

Сначала это недопустимый JavaScript:

const users = [
  'tom': {
    phone: '123',
    email: 'hotmail'
  },
  // ...
];

Вы должны определить массив или объект. Допустим, ваш users является литералом объекта:

const users = {
  'tom': {
    phone: '123',
    email: 'hotmail'
  },
  // ...
};

Затем вы можете перебрать записей объекта:

const list = Object.entries(users).map(([name, info]) =>
  (<User
    name={name}
    phone={info.phone}
    email={info.email}
  />)
);

Однако Object.entries() поддерживается не во всех браузерах, проверьте, работает ли он в вашей среде.