Как правильно хранить и выводить из state несколько элементов?

Question

[Ninja Mate]

Пытаюсь сделать стейт со множеством <UserRow/>

//через loop множество UserRow загружаю
that.setState( {user_row: that.state.user_row+<UserRow/>} );
//Выводит так [object Object][object Object][object Object]

Если один элемент задавать, то все нормально выводится
that.setState( {user_row: <UserRow/>} );
Как правильно такое реализовать?

Answer 1

[Сергей Соколов]

"+" это оператор сложения или конкатенации строк, поэтому каждый из объектов переводится в строку. Если метод toString() у объекта не определён, строка будет "[objectObject]".

Вместо этого, создайте массив, заполните его в цикле, и вставьте как есть. Понадобится каждому элементу добавить уникальное значение свойства "key", иначе React может ругаться. См. документацию React про Dynamic Children.

render() {
  var i, rows = [];
  for(i=0;i<N;i++) { rows.push( <UserRow key={ i } /> ); }
  // .. 
  return (
    <div>
        { rows }
    </div>
  );
}

state задействовать в вашем случае, скорее всего, вообще не нужно.

Comments

[Ninja Mate]

Спасибо, не знал про "+"

[Сергей Соколов]

Ninja Mate: я тоже наступал на эти грабли совсем недавно : ) То, что в JSX синтаксе выглядит как тег или текстовая строка, потом преобразуется в объект JS.

[Андрей Антропов]

Сергей Соколов: Индекс как ключ это антипаттерн, нужно использовать значение которое характеризует объект а не его позицию в массиве, что произойдет если порядок элементов изменится, а при этом каждый ребенок имеет состояние?