javascript - Material ui 步进器中的映射方法迭代

Question

• 我正在尝试在我的步进器中添加 redux 表单。
• 但问题是，如果我在其反射的所有三个位置中添加表单字段。
• 所以我开始调试步进器代码。
• 发现他们在map方法中迭代。
• 所以我想在为标签放置 if 条件的基础上，我将显示 div 和 form 标签。
• 但它不起作用。
• 你能告诉我如何解决吗？
• 以便将来我自己修复它。
• 在下面提供我的代码片段和沙箱

https://codesandbox.io/s/y2kjpl343z

return (
      <div className={classes.root}>
        <Stepper activeStep={activeStep} orientation="vertical">
          {steps.map((label, index) => {
            console.log("steps---->", steps);
            console.log("label---->", label);
            console.log("index---->", index);

            // if (index === 0) {
            if (label === "Select campaign settings") {
              return (
                <Step key={label}>
                  <StepLabel>{label}</StepLabel>
                  <StepContent>
                    <Typography>{getStepContent(index)}</Typography>
                    <div className={classes.actionsContainer}>
                      <div>
                        <div>test1</div>

                        <form>here</form>

                        <Button
                          disabled={activeStep === 0}
                          onClick={this.handleBack}
                          className={classes.button}
                        >
                          Back
                        </Button>
                        <Button
                          variant="contained"
                          color="primary"
                          onClick={this.handleNext}
                          className={classes.button}
                        >
                          {activeStep === steps.length - 1 ? "Finish" : "Next"}
                        </Button>
                      </div>
                    </div>
                  </StepContent>
                </Step>
              );
            }

            if (label === "Create an ad group") {
              return (
                <Step key={label}>
                  <StepLabel>{label}</StepLabel>
                  <StepContent>
                    <Typography>{getStepContent(index)}</Typography>
                    <div className={classes.actionsContainer}>
                      <div>
                        <div>test1</div>

                        <form>here</form>

                        <Button
                          disabled={activeStep === 0}
                          onClick={this.handleBack}
                          className={classes.button}
                        >
                          Back
                        </Button>
                        <Button
                          variant="contained"
                          color="primary"
                          onClick={this.handleNext}
                          className={classes.button}
                        >
                          {activeStep === steps.length - 1 ? "Finish" : "Next"}
                        </Button>
                      </div>
                    </div>
                  </StepContent>
                </Step>
              );
            }

            // return (
            //   <Step key={label}>
            //     <StepLabel>{label}</StepLabel>
            //     <StepContent>
            //       <Typography>{getStepContent(index)}</Typography>
            //       <div className={classes.actionsContainer}>
            //         <div>
            //           <div>test1</div>

            //           <form>here</form>

            //           <Button
            //             disabled={activeStep === 0}
            //             onClick={this.handleBack}
            //             className={classes.button}
            //           >
            //             Back
            //           </Button>
            //           <Button
            //             variant="contained"
            //             color="primary"
            //             onClick={this.handleNext}
            //             className={classes.button}
            //           >
            //             {activeStep === steps.length - 1 ? "Finish" : "Next"}
            //           </Button>
            //         </div>
            //       </div>
            //     </StepContent>
            //   </Step>
            // );
          })}
        </Stepper>
        {activeStep === steps.length && (
          <Paper square elevation={0} className={classes.resetContainer}>
            <Typography>All steps completed - you&apos;re finished</Typography>
            <Button onClick={this.handleReset} className={classes.button}>
              Reset
            </Button>
          </Paper>
        )}
      </div>
    );

Answer 1

这是一个工作代码和框:https://codesandbox.io/s/6l3wpo3xyr

对我来说，它似乎工作正常并且代码清晰。它可以做得更好一些，但一开始，它可能没问题。

如果需要，我可以编辑答案以添加详细信息。

关于 Object.entries 评论的回答

作为我声明的组件的实例变量:

steps = {
  "Select campaign settings": Step1,
  "Create an ad group": Step2,
  "Create an ad": Step3
};

这只是一个普通的 Javascript 对象。在 ES6 中，Object 类有 entries 方法，它接受一个像这样的对象，返回一个数组，该数组由给定对象的键和值组成。在这种情况下:

Object.entries(steps)

[
  [ "Select campaign settings", Step1 ],
  [ "Create an ad group", Step2 ],
  [ "Create an ad", Step3 ]
]

有了这样的结构，用map映射键值对就更容易了。 Array 类的 map 方法的第一个参数是数组的当前元素。之前使用过 Object.entries，该元素是表示 key 对的单个数组:

Object.entries(steps)[0]  // [ "Select campaign settings", Step1 ]

关于 .map(([ label, CustomStep ]) => ... 的评论的回答

这只是Array.map 方法的常见用法。通常，它允许使用映射函数将一个数组转换为另一个数组。一个获取数组元素并返回另一个元素的函数。

在这种情况下，要循环的数组元素是 Object.entries 调用提供的键值对。使用 ES6 数组，以及对象，都可以被解构，这就是那里正在发生的事情:

// you may see something like this around:
.map(element => {
  // let's say that element is an array, you'll use it like:
  // element[0] is the first element
  // element[1] is the second one
})

// with ES6 that array can be destructed on-the-fly this way, which is totally equivalent
.map(([ label, CustomStep ]) => {
  // label is the index 0 (element[0])
  // CustomStep is the index 1 (element[1])
})