如何從對象數組創建一個新的 object？

Question

我有以下動態對象數組：

[

{
id: "1"
name: "Jane"
age: 25
},

{
id: "2"
name: "John"
age: 35
},

{
id: "3"
name: "James"
age: 27
},
]

我需要像這樣創建新的 object：

"peopleSelected:{

"1":
{
"name": "Jane",
"age": 25
},

"2":
{
"name": "John",
"age": 35
},

"3":
{
"name": "James",
"age": 27
},

結構在哪里

"id" :
{
"name":name,
"age":"age
}

我需要使用 useState 保存這個新創建的 object，我不知道該怎么做。 請幫忙。

Answer 1

使用Array.prototype.reduce()

 const arr = [ { id: "1", name: "Jane", age: 25, }, { id: "2", name: "John", age: 35, }, { id: "3", name: "James", age: 27, }, ], solution = { peopleSelected: arr.reduce((acc, { id, name, age }) => { acc[id] = { name, age }; return acc; }, {}), }; console.log(solution);

Answer 2

您可以使用 object 解構如下：

import React from 'react';
import { useState, useEffect } from 'react';

let people = [
    {
        id: "1",
        name: "Jane",
        age: 25
    },
    {
        id: "2",
        name: "John",
        age: 35
    },
    {
        id: "3",
        name: "James",
        age: 27
    }
];

function App() {
    const [ selectedPeople, setSelectedPeople ] = useState({});

    useEffect(() => {
        console.log(Object.entries(people));
        let extractedArray = Object.entries(people);
        let result = extractedArray.map((item) => {
          return `${item[1].id}: ${{
            "name": item[1].name,
            "age": item[1].age
          }}`
        })
        console.log(result);
        
        // Performing object destructuring and setting the state of selectedPeople as an object
        setSelectedPeople({...people})
    }, [])

    return <div>
        <pre>
            {JSON.stringify(selectedPeople, null, '\t')}
        </pre>
    </div>;
}

export default App;