reactjs中如何将字符串转换为数组？答案

【问题标题】：How to convert string to array in react js?reactjs中如何将字符串转换为数组？
【发布时间】：2021-01-23 14:08:15
【问题描述】：

我有一个无法处理的 JSON 对象 Uncaught SyntaxError: Unexpected token o in JSON at position 1.

所以我用它做了一个字符串 var array = JSON.stringify(this.props.user);

现在该字符串具有我需要循环遍历它/使用映射函数的格式 但它是一个字符串。我怎样才能把这个字符串放入一个有效的数组中以便能够循环遍历它？

我所拥有的 JSON 对象（从 Chrome 复制，typeof(..) 返回对象）：

0:
avatar: "/media/dog_default_l.png"
birthday: "2020-09-14"
user_settings: ["P26"]
name: "Huso"
gesellig: true
verspielt: true
__proto__: Object
1:
avatar: "/media/dog_default_l.png"
birthday: "2012-04-24"
user_settings: (2) ["A9", "B5"]
name: "Medo"
gesellig: true
verspielt: false
__proto__: Object
length: 2
__proto__: Array(0)

此对象为字符串（从 console.log 复制）：

[{"name":"Huso","birthday":"2020-09-14","gesellig":true,"verspielt":true,"avatar":"/media/dog_default_l.png","user_settings":["P26"]},{"name":"Medo","birthday":"2012-04-24","gesellig":true,"verspielt":false,"avatar":"/media/dog_default_l.png","user_settings":["A9","B5"]}]

我需要的是一个数组（能够循环）：

users: [
        { avatar: '/media/dog_default_l.png',
          birthday: '2020-09-14',
          name: 'Huso',
          gesellig: true,
          verspielt: true,
          user_settings: [
            {settings: 'P26'},
          ],
        },
        { avatar: '/media/dog_default_l.png',
          birthday: '2012-04-24',
          name: 'Medo',
          gesellig: true,
          verspielt: false,
          user_settings: [
            {settings: 'A9'},
            {settings: 'B5'},
          ],
        },
      ],

JSON 对象上的 Object.entries、Object.keys 等返回或 {} 或什么都没有。我不知道是否有办法让这个对象循环？ 我真的被困住了，希望有人能找到可行的解决方案。 这个问题与How to map JSON response object with nested array to state 有关，因为那里没有人回答。

【问题讨论】：

你试过JSON.parse()将它返回给一个对象吗？
您的unexpected token 错误可能正在发生，因为您没有有 JSON 字符串；它已经被解析了。
@HoldOffHunger 是的，我做到了，当我看到我恢复了原始格式时 -> 我已经有了一个有效的数组，但是尝试和失败的数量让我有点抓狂。我现在已经使用 Object.entries 来消除对象中的键，现在我可以随心所欲地处理它了。

标签： javascript arrays json reactjs

【解决方案1】：

我发现 JSON 已经是有效的了，我只是对 Object.keys 等不同用法的错误感到困惑和恼火！

我已经解决了这个问题：

const arr = Object.entries(this.props.user);
const mapped = [];
arr.forEach(([key, value]) => mapped.push(value));

通过这种方式，我将对象内的 {} 条目剪掉并将它们保存到一个数组中，我可以使用该数组来映射和呈现其中的数据，如下所示：

..

return(
<div>
 {mapped.map((user)=>
   <div>
     <b>{user.name}</b>

...

【讨论】：

您可以只使用map 数组，而不是循环每个项目并推送到mapped 变量。如果合适，请将答案标记为正确:)

【解决方案2】：

您已经有一个对象数组。 typeof 变量返回 Object，因为数组是对象。

所以你可以对数组做任何你想做的事情，比如map、filter等。

【讨论】：

谢谢！这让我回到了如何正确使用 Object.entries 上。我已经用 ``` const arr = Object.entries(this.props.user); 解决了这个问题。常量映射 = []; arr.forEach(([key, value]) => mapped.push(value)); ``` 这样我将删除对象内的 {} 条目并将它们保存到一个新数组中，我可以使用它来映射其中的数据。