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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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