React JS - заполнение массива/списка

Question

Всем привет. Начал изучать React JS, и не могу понять, как заполнить массив по шаблону. Допустим:

class Something extends Component {
constructor() {
super();
this.state = {
elementsFromServer : [],
initedElements : []     
};
const elementTemplate {
name: "",
id: {},
selected: false
}

initElementsArray(){
this.setState(this.state.initedElements = this.state.elementsFromServer.map((x,i) => 
x.row.map((y) => 
elementTemplate.id = y, // как создать новое свойство ?
elementTemplate.name = "default", // ???
elementTemplate.selected = false // ???
)
}

То есть, мне нужно создать массив, который будет содержать свойства, созданные по шаблону с elementTemplate и заполнить его, добавив в elementTemplate.id значение из массива елементов elementsFromServer .

В C# я бы сделал, например, коллекцию лист и заполнил бы примерно так:

public class Template {
    string name = string.Empty;
    int id = 0;
    bool selected;
}
public Template (int i)
{
     this.id = i;
}
class Example(){
    void InitList (List<int> elementsFromServer) {

    List<Template> initedElements =  new List<Template>();
    foreach(var i in elementsFromServer){
        initedElements.Add(new Template(i));

       }       
    } 
 }

В результате у меня получится заполненый список initedElements, в котором будут элементы с дефолтными значениями класа Template и измененным значением id. Как мне сделать тоже самое, только в React JS ? После C# не просто привыкнуть к JavaScript )))

Answer 1

Я вижу у вас легкое непонимание метода setState и объектов. Смотрите.

class Something extends Component {
    constructor() {
        super();
        this.state = {
           elementsFromServer : [],
           initedElements : []     
        };
    }
    initElementsArray() {
         this.setState({
           initedElements: this.state.elementsFromServer
               .map((x,i) => 
                   x.row.map(y => ({
                       id: y,
                       name: "default",
                       selected: false
                   }))
               )
          });
     }
 }

setState всегда первым аргументом принимает ассоциативный массив, ключи которого это ключи state нуждающиеся в обновлении. Вы же передавали туда само значение состояния.

Теперь что касается заполнения по шаблону. Тут нет понятия шаблонов аналогичного си. Вам нужно было вернуть из функции объект. т.е. написать функцию

 function (y) {
     return { ... };
 }

У вас же не возникало вопросов как заполнить this.state по шаблону? Тут все так же.

 function (y) {
     return { id: y, name:"default", selected: false };
 }

ну и в терминах es6

y => ({ id: y,name: "default", selected: false })

БЛОГ НА HUSL

React JS - заполнение массива/списка

Ответы (1 шт):