Javascript在反应中解构数据答案

【问题标题】：Javascript destructuring data in reactJavascript在反应中解构数据
【发布时间】：2020-07-20 13:34:04
【问题描述】：

我正在使用 react-native 并且我正在尝试将数据传递给子组件，然后我想使用 map 方法来显示具有键值的用户数据。所以我在从对象制作数组后得到这个数据，我应该如何破坏它来获取用户名等。 父组件：

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>

我应该如何获取用户名或 profile_picture 数据？我试图做 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"
    ...
   }

}

【问题讨论】：

你为什么要这么做let userMap = Object.entries(this.state.users).map(key => key);？为什么不简单地传递let userMap = this.state.users？
props.users[0].map(... ...但是为什么你的数据在一个数组中？你能在你的组件使用它之前对其进行标准化吗？
@palaѕн 如果我像状态一样传递它，我得到对象，使用 .map() 我需要数组
@DrewReese 我认为是因为这个：let userMap = Object.entries(this.state.users).map(key => key);
@DrewReese 还有两个[]因为只有一个用户，会比较多，所以关闭单个用户数据。

标签： javascript arrays reactjs react-native

【解决方案1】：

您是否尝试过使用 props.users[0][1].username 代替？由于它似乎是数组中数组的第二个值

【讨论】：

嗨，是的，它有效，如何用地图制作？因为现在只有1个用户，但是这个数组里还会有更多
props.users[0].map(...
还有一件事，结果我得到用户名：“Egle”，这个“有没有办法不显示”？

【解决方案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>
))}

编辑：

因为，您还需要用户 ID，然后更新父组件中的 userMap 变量，如：

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

然后在子组件中，更新maplike：

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

或者，

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

【讨论】：

是的，它有效，我看到用户 ID 已消失。我应该如何获取用户 ID？
非常感谢您的耐心等待。有用。我需要更多了解对象数组分解。
是的，一开始有点棘手，但世界上的一切一开始都是困难的，直到它变得容易，对吧？ :-)

【解决方案3】：

你可以做以下事情：

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

【讨论】：

试试user[0].username?
@SpiritOfDragon 是的，你是对的。 user 是一个数组。
@MarcoCaldera 仍然不显示数据，但像这样： props.users[0][1].username 我可以获得用户名。但我需要用地图制作，因为会有更多的用户。

【解决方案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
    });
}

【讨论】：

你能检查我在问题中更新的对象数据吗？

【解决方案5】：

Array 似乎被捆绑了好几次。

您想要的值在第二个数组的第二个索引中。

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

【讨论】：