Javascript данные о разрушении в реакции

Question

Я использую реагирующую натуру и пытаюсь передать данные дочернему компоненту, а после этого хочу использовать метод map для отображения пользовательских данных со значением ключа. Итак, я получаю эти данные после создания массива из объекта, как мне его уничтожить, чтобы получить имя пользователя и т. Д. c .. РОДИТЕЛЬСКИЙ КОМПОНЕНТ:

render() {
    let userMap = Object.entries(this.state.users).map(key => key);

    return (
      <ViewPager
        users={userMap}
        usersRetrieved={this.state.usersRetrieved}
        addNewMatch={this.addNewMatch}
        navigation={this.props.navigation}
      />
    );

КОМПОНЕНТ РЕБЕНКА:

<Text>{JSON.stringify(props.users)}</Text>

Как мне получить данные об имени пользователя или профиле? Я пытался сделать props.users [0] .username, но не повезло

ПРИМЕР ДАННЫХ С 3 ПОЛЬЗОВАТЕЛЯМИ:

{
  "lwcIQTcpAae4e38hrD2K5Ar76W93": {
    "email": "emilissssss@temp.lt",
    "fbid": "3008*******71455",
    "gender": "male",
    "profile_picture": "...",
    "username": "Emilis"
  },
  "tempuser": {
    "email": "temp@temp.lt",
    "fbid": 315151515,
    "gender": "female",
    "matches": {
      "lwcIQTcpAae4e38hrD2K5Ar76W93": [Object]
    },
    "profile_picture": "...",
    "username": "Egle"
  },
  "thirdUserID":{
    "email": "temp@temp.lt"
    "username": "thirdUserUsername"
    ...
   }

}

Answer 1

Вы пытались вместо этого использовать props.users [0] [1] .username? Так как это, кажется, второе значение массива внутри массива

Answer 2

Вы можете обновить userMap переменную в родительском компоненте, например

let userMap = Object.entries(this.state.users).map(([key, value]) => value);

. Это возвращает массив пользовательских объектов, таких как:

[{
    "email": "emilissssss@temp.lt",
    "fbid": "3008*******71455",
    "gender": "male",
    "profile_picture": "...",
    "username": "Emilis"
  },
  {
    "email": "temp@temp.lt",
    "fbid": 315151515,
    "gender": "female",
    "matches": {
      "lwcIQTcpAae4e38hrD2K5Ar76W93": [Object]
    },
    "profile_picture": "...",
    "username": "Egle"
  },
  {
    "email": "temp@temp.lt"
    "username": "thirdUserUsername"
      ...
  }
]

Тогда в дочернем компоненте вы можете просто .map() для всех пользователей, таких как:

{props.users.map(user => (
  <Text>{user.username}</Text>
))}

Редактировать:

Поскольку, вам также нужен идентификатор пользователя, затем обновите переменную userMap в родительском компоненте, например:

let userMap = Object.entries(this.state.users);

Затем в дочернем компоненте обновите map, например:

{props.users.map(([key, user]) => (
  <Text>{key}</Text>
  <Text>{user.username}</Text>
))}

Или

{props.users.map(([key, user]) => (
  <Text>{key + ', ' + user.username}</Text>
))}

Answer 3

Array кажется связанным несколько раз.

Требуемое значение находится во втором индексе второго массива.

{props.users.map(user => (
  <Text>{user[1].username}</Text>
))}

Answer 4

Что вы пытаетесь сделать с Object.entries(this.state.users).map(key => key);? Object.entries уже возвращает массив, поэтому нет необходимости отображать его впоследствии, как я считаю.

В любом случае, для деструктурирования объекта в js:

const obj = {
  a: "value",
  b: "other value",
}
const {a,b} = obj
// a "value", b "other value"

Обратите внимание, что переменная и ключ должен быть назван так же. И теперь у вас есть константы a и b, доступные в вашем коде.

В вашем дочернем компоненте вы могли бы получить что-то вроде этого:

render() {
    let users = props.users

    return users.map(user => {
        const {username, email} = user; // destructure whatever you want
        return <Text>{email} {username}</Text> // display it the wy you want
    });
}

Answer 5

Вы можете сделать следующее:

{props.users.map(user => (
  <Text>{user[0].username}</Text>
))}