Arrays 使用map（）函数onClick（ReactJS）在数组上循环

我想创建一个向导，在用户单击“下一步”按钮时更改内容

我目前正在尝试使用.map函数，它可以工作，但是如何调整代码，使其在数组onClick中的每个步骤上循环

目前，我的代码只显示了3个单独的输入以及数组中的所有步骤，我想做的是在单击每个步骤时进行迭代

下面是我的代码示例：

数组：

const wizardControls = {
    steps: [
        {
            step: 1,
            name: 'name1',
            type: 'text',
            placeholder: 'name1',
        },
        {
            step: 2,
            name: 'name2',
            type: 'text',
            placeholder: 'name2',
        },
        {
            step: 3,
            name: 'name3',
            type: 'text',
            placeholder: 'name3',
        },
    ],
};

    {steps.map((step, index) => (
        <div key={index}>
            <input
                value={value}
                name={step.name}
                type={step.type}
                placeholder={step.placeholder}
                onChange={onChange}
            />
        </div>
    ))}

JSX使用map（）函数：

const wizardControls = {
    steps: [
        {
            step: 1,
            name: 'name1',
            type: 'text',
            placeholder: 'name1',
        },
        {
            step: 2,
            name: 'name2',
            type: 'text',
            placeholder: 'name2',
        },
        {
            step: 3,
            name: 'name3',
            type: 'text',
            placeholder: 'name3',
        },
    ],
};

    {steps.map((step, index) => (
        <div key={index}>
            <input
                value={value}
                name={step.name}
                type={step.type}
                placeholder={step.placeholder}
                onChange={onChange}
            />
        </div>
    ))}

{steps.map（（步骤，索引）=>(
))}

我认为按钮需要一个处理函数来循环索引，但是，我不确定如何使用map（）函数实现这一点

---

如果map（）函数不是最好的方法，我愿意采用更好的方法。

如果您希望一次显示一个步骤，请不要使用

Array.map（）

来渲染所有步骤。使用

useState

保存当前索引（步骤），并按索引从

steps

数组中获取当前项。要跳到下一步，请将索引增加1

const{useState}=React；
const Demo=（{steps}）=>{
const[index，setIndex]=useState（0）；
const[values，setValue]=useState（[]）；
常量下一个=（）=>
setIndex（步长=>步长{
const val=e.target.value；
设置值（v=>{
常量状态=[…v]；
状态[索引]=val；
返回状态；
})
};
常数步长=步长[索引]；
返回(
下一个
);
};
常量向导控件={“步骤”：[{“步骤”：1，“名称”：“名称1”，“类型”：“文本”，“占位符”：“名称1”}，{“步骤”：2，“名称”：“名称2”，“类型”：“文本”，“占位符”：“名称2”}，{“步骤”：3，“名称”：“名称3”，“类型”：“文本”，“占位符”：“名称3”}；
ReactDOM.render(
,
根
);
实现这一点的一种方法是对所处的步骤进行切片（基于索引）

下面是一个示例，说明您的代码可能是什么样子

const [step, setStep] = useState(1)

...

steps.slice(step - 1, step).map((step, index) => (
  ...
))

请参见此处的一个工作示例：
如果我理解正确，您希望开始仅显示索引0，然后当用户点击下一个时仅显示索引1，依此类推？这可能是通过使用
useState
保存当前索引以显示，然后在没有贴图的情况下使用索引来渲染所需的数据。单击“下一步”时，只需增加存储在
useState
中的索引。您可能需要对所选索引进行一些验证，这取决于您打算对其执行的其他操作，以确保数组实际包含所请求的索引。是的，这正是它。我在问题中忘记提到的是，上面的数组已经使用
useState
存储。在理解如何使用map（）和迭代onClick时遇到困难。-我欣赏你的洞察力！这就是我正在尝试的如果你不介意的话，你能添加一些注释以供使用吗？到目前为止，我还没有使用过那个钩子，如果我继续使用你的解决方案，我需要用我的头绕着它我已经查阅了，但仍然想了解您是如何在该功能的上下文中使用它的。-提前谢谢你！这里不需要使用
useCallback
。其主要思想是在重新渲染组件时保留函数，这样子级也不会因为属性（函数）的更改而重新渲染。这是一个性能优化，可以在这里跳过。谢谢。如果没有
useCallback
，这会是什么样子？在片段中，它似乎被使用了两次。-这并不是说我希望这一点不那么优化，而是如果我只使用
useState
来实现这一点，我会简单地从代码中删除
useCallback
？对不起，还有其他问题，我只是想了解一下，以防我必须完全重构我的应用程序状态。这里的优化不是真的必要，只是我通常项目中的一个习惯。我将删除它，因为它会分散对实际解决方案的注意力：）我非常感谢。我很可能会在以后的某个日期，在您的原始答案中提到您使用
useCallback
的方式。这是一个有趣的选择。感谢您抽出时间回答！