如何在反應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>

...