如何在反应js中将字符串转换为数组？

Question

我有一个 JSON object 如果没有Uncaught SyntaxError: Unexpected token o in JSON at position 1的 JSON 我无法处理。

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

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

我拥有的是 JSON object（从 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)

这个 object 作为字符串（从 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'},
          ],
        },
      ],

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

Answer 1

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

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

Answer 2

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

我已经解决了这个问题：

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

通过这种方式，我删除了 object 中的 {} 条目并将它们保存到一个数组中，我可以使用该数组将 map 中的数据呈现如下：

..

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

...