#reactjs
Вопрос:
Здравствуйте, у меня есть ввод под названием шаги, и если пользователь вводит, скажем, 5 шагов, то я хочу 5 раз отобразить готовый компонент и отправить разные данные в каждый из этих 5 компонентов.
Прямо сейчас у меня есть это, но это просто не работает вообще, или я просто показываю один рендеринг коробки компонентов, а не 5. Я использую крючки к вашему сведению. шаги-это значение, которое пользователь вводит во входные данные.
<div>
{stepBlock.map(Block => ( <StepsBuilder key={steps} />))}
</div>
Ответ №1:
Вы можете сделать что-то подобное. Заданное значение блока шагов должно быть целочисленным.
давайте скажем stepBlock === 5
{[...Array(stepBlock)].map((e, i) => <StepsBuilder key={steps} />)}
Комментарии:
1. Итак, у меня есть это в разделе, который скрыт с помощью логического крючка. Когда пользователь запускает отправку формы, он отображает этот раздел, однако, несмотря на то, что я ввел 7 шагов, он отобразит только 1 компонент.. Это потому, что я просто отключаю его, разделяя логическое значение на true?
2. итак, я вижу, что проблема в том, что у меня есть «const [шаги, шаги] = useState(число);», когда я изменил ваш код на этот: {[… Массив(шаги)].карта((e, i) => ><Ключ StepsBuilder={шаги}/>)}, и я меняю число только на 3 внутри этой константы, она показывает 3 из этого компонента. Поэтому моя проблема заключается в том, что он не обновляет дочерний компонент при обновлении значения шагов. есть какие-нибудь идеи?
3. хорошо, моя проблема заключалась в том, что я определил ее как число. Я сделал это строкой, затем преобразовал ее в Int, и она получает массив, скажем, 7, такой как этот: (7) [0, 1, 2, 3, 4, 5, 6].. однако для stepBlock это не приводит к тому, что 7 компонентов StepBuilder по-прежнему остаются только одним, хотя внутри массива явно 7 чисел.
4. Чак шаговый блок внутри консоли. войдите в систему и посмотрите, какую ценность вы получаете. Также проверьте значение typeof. Приведенный выше код работает нормально, когда вы заменяете stepBlock на какое-то число
5. Да, это работает, если вы это сделаете, однако я обнаружил, что моя проблема в том, что он не обновляет его с помощью динамической переменной, которая извлекается из того, что вводит пользователь. в принципе, он не будет обновляться и меняться.
Ответ №2:
Я полагаю, что stepBlock-это список элементов, которые вы хотите отправить в качестве свойств компоненту StepsBuilder.
<div>
{stepBlock.map(block => ( <StepsBuilder key={steps} block={block} />))}
</div>
Внутри компонента StepsBuilder у вас будет блок в качестве свойства:
function StepsBuilder(props) {
console.log(props.block)
}
Комментарии:
1. на самом деле stepblock-это res из формы ввода пользователя. Я пытался использовать это.. Я в основном пытаюсь сказать, вводит ли пользователь 5 шагов. .затем я хочу отобразить 5 компонентов stepbuilder. Я просто пытался сделать это с помощью картографии..