1. 首页
  2. 问题
  3. 材质ui的stepper中的map方法迭代
小编典典

材质ui的stepper中的map方法迭代

reactjs

  • 我正在尝试在步进器中添加redux表单。
  • 但是问题是，如果我在其中反映所有三个位置的表单字段中添加表单字段。
  • 所以我开始调试步进代码。
  • 发现他们正在使用map方法进行迭代。
  • 所以我认为在放置标签条件的基础上，我将显示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>
    );

阅读 280

收藏
2020-07-22

共1个答案

小编典典

这是一个有效的codeandbox：https：//codesandbox.io/s/6l3wpo3xyr

对我来说，似乎可以正常工作并且代码清晰。可以做得更好，但是首先可以。

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

回答有关的评论 Object.entries

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

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

这只是一个纯Javascript对象。在ES6中，Object该类具有entry方法，该方法采用这样的对象，该方法返回给定对象的键和值数组。在这种情况下：

Object.entries(steps)

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

具有这样的结构，使用映射键值对更加容易map。类map方法的第一个参数Array是数组的当前元素。Object.entries前面已经使用过，元素是表示密钥对的单个数组：

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])
})
2020-07-22