ReactJS 根据用户输入的数量添加组件答案

【问题标题】：ReactJS Add in Component based on a number user inputsReactJS 根据用户输入的数量添加组件
【发布时间】：2021-03-26 09:30:18
【问题描述】：

您好，我有一个称为步骤的输入，如果用户输入 5 个步骤，那么我想显示一个预构建组件 5 次，并将不同的数据发送到这 5 个组件中的每一个。

现在我有这个，但它根本不起作用，或者我只显示组件框的一个渲染而不是 5。我正在使用钩子仅供参考。 steps 是用户在输入中输入的值。

 <div>
     {stepBlock.map(Block => ( <StepsBuilder  key={steps} />))}
 </div>

【问题讨论】：

标签： reactjs

【解决方案1】：

你可以做这样的事情。给定 stepBlock 值为整数。

让我们说stepBlock === 5

{[...Array(stepBlock)].map((e, i) => <StepsBuilder  key={steps} />)}

【讨论】：

所以我在一个通过布尔挂钩隐藏的部分中有这个。当用户运行表单提交时，它会取消隐藏该部分，但是即使我输入了 7 个步骤，它也只会呈现组件的 1 个。这是因为我只是通过将布尔值划分为 true 来取消隐藏它吗？
好的，所以我看到问题是我有“const [steps, setSteps] = useState(Number);”当我将您的代码更改为： {[...Array(steps)].map((e, i) => )} 并且我将 Number 更改为该 const 内的 3它显示了该组件的 3 个。所以我的问题是它没有在更新步骤值时更新子组件。有什么想法吗？
好吧，我的问题是我把它定义为一个数字。我把它变成了一个字符串，然后将它转换为一个 Int 并且它得到一个说 7 的数组，例如：(7) [0, 1, 2, 3, 4, 5, 6].. 对于 stepBlock 但它没有' t 导致 7 个 StepBuilder 组件仍然只有一个，即使数组内显然有 7 个数字。
在 console.log 中检查 stepBlock，看看你得到了什么价值。还要检查 typeof 值。当您用某个数字替换 stepBlock 时，上面的代码工作正常
是的，如果您这样做，它确实有效，但是我发现我的问题是它没有使用从用户输入的内容中提取的动态变量来更新它。基本上不会更新和改变。

【解决方案2】：

我想 stepBlock 是您想要作为属性发送给 StepsBuilder 组件的项目列表。

 <div>
     {stepBlock.map(block => ( <StepsBuilder  key={steps} block={block} />))}
 </div>

在 StepsBuilder 组件中，您将拥有块作为属性：

function StepsBuilder(props) {
  console.log(props.block)
}

【讨论】：

实际上 stepblock 是来自用户输入表单的 res。我尝试使用它。我基本上是在尝试说用户是否输入了 5 个步骤。 .then 我想渲染出 5 个 stepbuilder 组件。我只是试图通过映射来做到这一点..