[React] Aktualizacja tablicy obiektów w postaci hierarchii

0

Robię wyświetlanie hierarchii produktów. Chcę dodać możliwość dodawania do gałęzi nowego elementu, który potem będzie zapisany w bazie.
Hierarchia wygląda mniej więcej tak

title

Przykładowa tablica:

const hierarchies = [
    {
        id: 1, 
        name:"samochód",
        children: [
            {id: 2, name:"ciezarowy"}, 
            {id: 3, name: "osobowy", children: [
                {id: 4, name: 'audi'},
                {id: 5, name: 'vw'}
            ]}
        ]
    }
]

Nie mogę sobie poradzić, aby po kliknięciu na czerwony plusik dodawał się nowy item, który tak naprawdę wyświetlę jako <input type="text"... />. Wiem, że najlepiej jest to zrobić dodając do state.hierarchies listę hierarchii już z nowym elementem (np może mieć property IsNew, który będzie wskazywał, że ma się wygenerować jako input).

0

Ok, mam coś takiego

var tempData = this.state.data;

        tempData.forEach(function iter(a){
            if(item.id == a.id){
                a.children.push({id: 100, name:'test', children: []});
            }
            debugger;
            a.children.forEach(iter);
        });

tylko teraz jak przerwać iterację, kiedy odnajdzie kliknięty obiekt

0
const tempData = this.state.data;
const a = tempData.find(a=>item.id===a.id);
a.children.push({id: 100, name:'test', children: []});

Nie do konca wiem o co Ci chodzi - ale tu masz taka podpowiedz, ze mozesz uzywac tez innych metod niz forEach
Polecam zapoznac sie z ES6 zanim sie zabierzesz za reacta

1
lukaszri napisał(a):

tylko teraz jak przerwać iterację, kiedy odnajdzie kliknięty obiekt

Nie można przerwać forEacha (no może poza hackem z try...catch, ale nie rób tego).

Edit:

Jeśli już koniecznie potrzebujesz czegoś w stylu przerywalnego forEach to możesz użyć Array.prototype.some, tu masz porównanie dwóch prostych (i bezsensownych) przykładów z forEach i some:

const data = [
  { id: 1 },
  { id: 2 },
  { id: 3 },
]
function go(data, id) {
 let result
 
 data.forEach(item => {
   console.log('processing:', item)
   if (item.id === id) {
     result = item
   }
 })
 
 return result
}

CodePen: https://codepen.io/caderek/pen/eereaW?editors=0012

vs.

function go(data, id) {
  let result
  
  data.some(item => {
    console.log('processing:', item)
    const cond = item.id === id
    
    if (cond) {
      result = item
    }
    
    return cond
  })
  
  return result
}

CodePen: https://codepen.io/caderek/pen/LOmOor?editors=0012

0
mkrds napisał(a):
const tempData = this.state.data;
const a = tempData.find(a=>item.id===a.id);
a.children.push({id: 100, name:'test', children: []});

Nie do konca wiem o co Ci chodzi - ale tu masz taka podpowiedz, ze mozesz uzywac tez innych metod niz forEach
Polecam zapoznac sie z ES6 zanim sie zabierzesz za reacta

Zauważ jak moja tablica wygląda. Gdyby wyglądała inaczej to oczywiście, twój kod jest jak najbardziej poprawny. W mojej tablicy mam property children, który przechowuje kolejne elementy i je też chcę przefiltrować.

1 użytkowników online, w tym zalogowanych: 0, gości: 1