Использование переменной внутри цикла jsx

У меня есть такой цикл внутри jsx render

return(
<View>
   {[...Array(10)].map((x, i) => (
          <Input
            placeholder="Category {i}"
          />
        ))}
</View>
)

Я пытаюсь создать 10 входов динамически, используя приведенный выше код, здесь я хочу использовать переменную I внутри заполнителя, поэтому я получаю входы с заполнителем категории 1, категории 2 и т. д., но мое приложение падает без каких-либо ошибок, что такое правильный способ использования переменной внутри карты jsx.

Что такое массив (10)? Этот манекен означает массив из 10 элементов?

Liki Crus 10.04.2022 20:10

да создание 10 предметов

Gracie williams 10.04.2022 20:11

Цикл работает нормально, я просто хочу получить подсчет внутри заполнителя.

Gracie williams 10.04.2022 20:12
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Клиент для URL-адресов, cURL, позволяет взаимодействовать с множеством различных серверов по множеству различных протоколов с синтаксисом URL.
Четыре эффективных способа центрирования блочных элементов в CSS
Четыре эффективных способа центрирования блочных элементов в CSS
У каждого из нас бывали случаи, когда нам нужно отцентрировать блочный элемент, но мы не знаем, как это сделать. Даже если мы реализуем какой-то...
1
3
18
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Если кому-то интересно, я решил это, написав код, как показано ниже.

  {[...Array(10)].map((x, i) => {
          return (
            <Input        
              placeholder={"Category " + (i + 1)}
            />
          );
        })}

Да, это может сработать, но может быть чище, см. мой ответ выше.

BARNOWL 10.04.2022 20:14
Ответ принят как подходящий

Может быть, попробовать это

return (
  <View>
    {new Array(10).map((x, i) => (
      <Input placeholder={`Category ${i + 1}`} />
    ))}
  </View>
);

Обратитесь к этому

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

Вы можете использовать переменную javascript в строке, обернутой символом шаблона: "'".

И нужно поставить key у детей.

return(
<View>
   {new Array(10).map((x, i) => (
          <Input
            key={i}
            placeholder={`Category ${i}`}
          />
        ))}
</View>
)

Другие вопросы по теме