Как обновить существующий объект - PullRequest
Новая
       2

Как обновить существующий объект

0 голосов
/ 25 мая 2020

Я пытаюсь обновить текущий объект в массиве новым свойством с помощью перехватчиков состояния. Массив с объектом выглядит так: 

const myData = [
   {
     dataLabels: [
        {
           align: 'left'
        }
     ],
     name: 'my data',
     data: [
       {
         y: 1,
         name: 'Daryl'
       },
       {
         y: 2,
         name: 'Negan'
       }
     ]
   }
 ];

, и я не хочу добавлять свойство цвета к объектам данных внутри useState hook. Это то, что я пробовал до сих пор: 

const [ newMyData ] = useState({
   ...myData,
   0: { 
     ...myData[0],
     data: myData[0].data.map((item, index) => ({ ...item, color: getChartColors()[index] }))
   },
 });

, но проблема в том, что newMyData теперь превращается в объект, а не в массив. Что я делаю не так и как мне решить свою проблему? Заранее спасибо

Ответы [ 2 ]

1 голос
/ 25 мая 2020

Вы передаете объект в качестве начального состояния: 

const [ newMyData ] = useState([ /* <--- use '[' not '{' */
   ...myData,
   0: { 
     ...myData[0],
     data: myData[0].data.map((item, index) => ({ ...item, color: getChartColors()[index] }))
   },
 ] /* <--- same here - use ']' not '}' */ );

ОБНОВЛЕНИЕ:

На основе того, что вы спросили в комментариях: 

const myData = [
   {
     dataLabels: [
        {
           align: 'left'
        }
     ],
     name: 'my data',
     data: [
       {
         y: 1,
         name: 'Daryl'
       },
       {
         y: 2,
         name: 'Negan'
       }
     ]
   }
 ];

const myObject = myData[0];

const nextObject = {
    ...myObject,
    data: myObject.data.map((item, index) => ({ ...item, color: getChartColors()[index] }))

}

const [myData, setMyData] = useState([ nextObject ]); /* If you still want this to be an array */

/* OR */

const [myData, setMyData] = useState( nextObject ); /* If you want it to be an object instead */
0 голосов
/ 25 мая 2020

Привет, вы можете следовать этому примеру, чтобы включить новое свойство в массив с помощью хуков useState. 

import React, {useState} from "react";

export default function UseStateExample() {
    const [myData, setMyData] = useState([
        {
            dataLabels: [
                {align: 'left'}
            ],
            name: 'my data',
            data: [
                {y: 1, name: 'Daryl'},
                {y: 2, name: 'Negan'}
            ]
        }
    ]);

    function getChartColors() {
        return ["red", "green", "blue"]
    }
    function clickHandler(event) {

        let items = [];
        myData[0].data.map((item, index) => {
            item.color = getChartColors()[index];
            items.push(item);
        });

        setMyData([
            ...myData
        ]);

        console.log(myData)
    }

    return (
        <div>
            <button onClick={clickHandler}>Update myData and show in Console</button>
        </div>
    );
}
...