0

Всем привет. Начал изучать 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 )))

1 ответ 1

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 })
5
  • Спасибо за ответ. Кажется, я не до конца понимаю как работают локальные объекты. Посмотрел ваш код и получилось заполнить массив, но только когда написал this.setState(this.state.initedElements = {initedElements : this.state.elementsFromServer.map (). Если просто initedElements: то получается undefined. Казалось бы все должно быть просто, но куча мелочей, о которых в интернете ничего не нашел. В C# как то все понятно - есть переменная, в которую можно записать данные. А тут как-то все на setState, вот и не могу до конца понять логику React...))))
    – Yuriy Zhuk
    Commented 23 мая 2020 в 8:41
  • Всё, разобрался. Было undefined, так как вызывал метод 'console.log()' в 'componentDidMount()' а не в render.
    – Yuriy Zhuk
    Commented 23 мая 2020 в 10:28
  • @YuriyZhuk Какое у вас интересное сравнение, сравниваете React и C#, язык и библиотеку, было бы куда логичнее сравнивать Javascript и C#.
    – Ceri
    Commented 23 мая 2020 в 11:18
  • @Ceri ну в фреймворке используется то JS ? Я сравниваю подход программирования на C# + .NET с JavaScript + React.
    – Yuriy Zhuk
    Commented 23 мая 2020 в 13:40
  • Так по сути в приведенных примерах нету частей от react, это обычная запись данных в объект
    – Ceri
    Commented 23 мая 2020 в 14:27

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.