Как лучше работать с массивом данных?

Question

[Vasyl Kovbassa]

Помогите, потому что у меня кризис. Не могу догнать как это реализовать:
С сервера, от MongoDb приходит массив объектов такого вида:

let data = [
    {
      name: 'string',
      val1: int,
      val2: int,
      nodes: [
          {
           name: 'string',
           val1: int,
           val2: int,
           nodes: [  ...  ]
          }, 
          {
          // ... 
          }
      ]
    },
    {
    // ...
    }
]

уровень вложенности дочерних массивов не ограничен. То есть каждый узел может иметь любое количество своих дочерних узлов, которые в свою очередь своих. На базе этого массива данных нужно сделать React app с возможностью добавлять новые узлы и подузлы в виде дерева и суммированием дочерних значений в родительских компонентах:

_'${name} | ${val1} | ${val2= val1+childs val2}'
 |___ '${name} | ${val1} | ${val2=val1+childs val2}' // child
 |_____ .....

Как такой массив правильно обходить и с помощью UI редактировать, добавлять и удалять узлы?
Подскажите кто чем может. Заранее благодарен!
ПС: Это мое первое знакомство с React.js но с базовыми принципами ознакомился.

Answer 1

[Никита Гущин]

Это обычный рекурсивный обход дерева. Добавление\удаление\редактирование будет зависеть от того как (и где) вы храните данные - flux\redux\whatever. В случае с редаксом - я бы хранил в state дерево в плоском виде (вам нужны будут id, но, думаю, что с монго - это не проблема).

Отображать дерево можно так:

const MySuperTree => (props) => (
  <ul>{props.nodes.map(node => <TreeNode {...node} />)}</ul>
)

class TreeNode extends PureComponent { 
  render() {
    const { name, val1, val2, nodes } = this.props
    return (
      <li>
        <b>{name}  | {val1} | {val1+getValFromChild(childs)} {val2}</b>
        {nodes && nodes.length > 0 && (
          <MySuperTree nodes={nodes} />
        )}
     </li>
    )
  }
}

Comments

[Vasyl Kovbassa]

а getValFromChild(childs) реализовать через ref или каким-то другим способом?

[Vasyl Kovbassa]

и если можно, пару слов о дереве в плоском виде.

[Никита Гущин]

Vasyl Kovbassa:

а getValFromChild(childs) реализовать через ref или каким-то другим способом?

Вам же просто надо посчитать значение (число). Поэтому это будет обход дерева (без участия реакта)

и если можно, пару слов о дереве в плоском виде.

Выглядит просто как мапа:

const flatTree = {
 [nodeId]: { id, ..., nodes: [ nodeId1, nodeId2, nodeId3 ] }
}

При этом все дочерние ноды заменяем на массив id.

В такой реализации есть два момента:
1) каждый компонент ноды (TreeNode) надо коннектить к редаксу
2) возможно вам понадобится использовать библиотеку reselect , для того, чтобы избежать лишних ререндеров. Но для новичка - это сложновато, поэтому можете пока отложить

[Никита Гущин]

Vasyl Kovbassa: гляньте еще вот этот вопрос Как в REACT-REDUX сделать, чтобы перерендеривался только один элемент? и там есть ссылка на еще один - картина должна стать яснее

[Vasyl Kovbassa]

Вам же просто надо посчитать значение (число). Поэтому это будет обход дерева (без участия реакта)

но если юзер изменит какое то из значений, или дабавит новый элемен, то придется обходить все дерево, а с ref, если я правильно понимаю перерасчет пойдет только в одной ветке.
Большое спасибо за помощь!

[Никита Гущин]

Vasyl Kovbassa: ref на это не как не влияет. ref - это способ получить DOM-ноду или элемент, установленный в дом.

В вашем случае это значение я бы рассчитывал на этапе mapState в коннекте (если вы используете редакс)

Answer 2

[Ваге]

я тоже столкнулась с этим.мне повезло что я работал с react-mobx.я вам тоже буду советовать использовать mobx. смотрите здесь https://jsfiddle.net/vaheqelyan/u4t83c5L/
создадим
@observable treeData = [] в Store
в этом будет содержаться массив который будем отправлять в базу данных.

@computed get treeComputed() {
        var obj = {};
        this.treeData.map(function(value, index) {
            if (value.hasOwnProperty("belongs")) {
                var objWithPath = objectPath.get(obj, value.belongs.split("."));

                objWithPath[`text_${value.id}`] = {
                    text: value.name,
                    child: {},
                    belongs: value.belongs,
                    id: value.id,
                    disabled: false,
                    indx: value.indx,
                    visible: value.visible
                };
            } else {
                obj[`text_${value.id}`] = {
                    id: value.id,
                    text: value.name,
                    child: {},
                    mode: "editable",
                    indx: value.indx,
                    disabled: false,
                    visible: value.visible
                };
            }
        });
        return obj;
    }

здесь мы будем с генерировать объекты который и будет показано для пользователей, для этого и будем использовать @computed.
Вычисляемые значения(@computed) — это значения, которые могут быть получены из существующего состояния или других вычисляемых значений.
ну короче у вас есть массив но он будет выглядеть как объект.весь изменения которые будут происходить в объекте будут изменены в массиве и вы будете отправить массив в базу данных,о потом когда будете вынести данный массив вы будете читать как объект так более удобно будет добавить или удалить,изменить...данные

например в firebug добавьте объект в массив
вот наш объект

а вот и наш массив для БД

я надеюсь что вы поняли что то
я только хотел поделиться с вами с моим опытом

Comments

[Vasyl Kovbassa]

спасибо!!