Использование Array.map() для динамической визуализации элементов
Условный рендеринг полезен, но вам могут понадобиться ваши компоненты для отображения неизвестного количества элементов. Часто в реактивном программировании программист не имеет никакого способа узнать, какое состояние приложения находится во время выполнения, потому что так много зависит от взаимодействия пользователя с этой программой. Программистам необходимо написать свой код для правильной обработки этого неизвестного состояния раньше времени. Использование Array.map() в React иллюстрирует это понятие. Например, вы создаете простое приложение «To Do List». Как программист, у вас нет способа узнать, сколько элементов пользователь может иметь в своем списке. Вам необходимо настроить компонент для динамического отображения правильного количества элементов списка задолго до того, как кто-то, использующий программу, решит, что сегодня день прачечной.
Редактор кода имеет большую часть компонента MyToDoList . Некоторые из этого кода должны выглядеть знакомыми, если вы завершили задачу контролируемой формы. Вы заметите textarea и button, а также несколько методов, которые отслеживают их состояния, но пока ничего не отображается на странице. Внутри constructor создайте объект this.state и определите два состояния: userInput должен быть инициализирован как пустая строка, а toDoList должен быть инициализирован как пустой массив. Затем удалите комментарий в методе render() рядом с переменной items. Затем с помощью метода Array.map() перечислите массив toDoList, хранящийся во внутреннем состоянии компонента и динамически визуализируйте li для каждого элемента. Попробуйте ввести строку eat, code, sleep, repeat в textarea , затем нажмите кнопку и посмотрите, что произойдет.
Примечание. Возможно, вы знаете, что все дочерние элементы дочернего элемента, созданные с помощью операции сопоставления, такие как эта, должны быть снабжены уникальным атрибутом key. Не беспокойтесь, это тема следующей задачи.