Блог

Главная - Вопросы по программированию - Добавление объекта в массив во вложенный объект с помощью setState

Добавление объекта в массив во вложенный объект с помощью setState

#reactjs

Вопрос:

Я хотел бы знать , как добавить объект datasets , я пытаюсь добавить объект в массив с помощью setState, но это вообще не работает .

мой код выглядит так :

  const [DataContext, setDataContext] = useState([
    {
      labels: defaultLabels,
      datasets: [
        {
          label: "dataSetting",
          data: defaultDatas,
          backgroundColor: defaultBackgroundColor,
        },
      ],
    },
    {
      labels: defaultLabels,
      datasets: [
        {
          label: "dataSetting",
          data: defaultDatas,
          backgroundColor: defaultBackgroundColor,
        },
      ],
    }, 
    {
      labels: defaultLabels,
      datasets: [
        {
          label: "dataSetting",
          data: defaultDatas,
          backgroundColor: defaultBackgroundColor,
        },
      ],
    },  
   const addAxis = index =>  {
    let addAxis = [...DataContext];
    addAxis[index].datasets.push({ label: "", data: "", background: "" });

    setDataContext(addAxis);
  };

Комментарии:

1. это связано с тем, что оператор распространения создает неглубокую копию. вам нужно создать глубокую копию, а затем обновить состояние

Ответ №1:

Вам нужна глубокая копия, чтобы обновить состояние:

 const addAxis = index =>  {
  setDataContext(dataContext => dataContext.map((data, idx) => {
     return idx === index ? {
        ...data,
        datasets: [...data.datasets, { label: "", data: "", background: "" }]
     } : data
  })
};

Комментарии:

1. Это самый эффективный способ сделать это, подпишись на @DrewReese. Вы можете использовать библиотеку, такую как lodash , для глубокого клонирования.

Ответ №2:

Вам нужно глубоко скопировать DataContext.

 const _copy = (value) => {
    let object;
    if (Array.isArray(value)) {
        object = [];
        value.forEach((item, index) => {
            if (typeof value[index] === 'object') {
                object[index] = _copy(value[index]);
            } else {
                object[index] = value[index];
            }
        });
    } else {
        object = {};
        for (let key in value) {
            if (typeof value[key] === 'object') {
                object[key] = _copy(value[key]);
            } else {
                object[key] = value[key];
            }
        }
    }
    return object;
};

const addAxis = index =>  {
    let addAxis = _copy(DataContext);
    addAxis[index].datasets.push({ label: "", data: "", background: "" });

    setDataContext(addAxis);
 };
Метки: