javascript - 如何在地图功能中只打印一次按钮仍然能够访问迭代值？

Question

我在 material-ui 中使用 formik 作为表单。我创建了一个用于打印文本字段的地图功能。现在，我只想显示一次提交按钮，我也通过定位索引来实现。但问题是，当我尝试访问迭代项目时，我只能访问最后一个项目

我的代码：

{["Name", "E-Mail", "Phone"].map(
            (item, index, arrLength) => {
              let tempItem = tempItem.toLowerCase().replace("-", "");
              return (
                <Fragment key={index}>
                  <Grid item>
                    <TextField
                      variant="outlined"
                      id={tempItem}
                      name={tempItem}
                      label={item}
                      onChange={formik.handleChange}
                      error={
                        formik.touched.tempItem
                          ? formik.touched.tempItem&&
                            Boolean(formik.errors.tempItem)
                          : null
                      }
                    />
                  </Grid>
                  {arrLength.length - 1 === index && (
                    <Grid item>
                       <Button
                        disabled={formik.errors.tempItem ? true : false}
                        color="primary"
                        variant="contained"
                        type="submit"
                      >
                        Submit /* when I am trying to access the item and tempItem only the last of 
                        array is being accessible. As I am using formik to show errors, when I am
                        clicking the submit button it should check error in all other fields, and if
                        no errors then only the button should display, but in this case, the button
                        checks only the last field(phone) and if its valid, submit button is showing
                        even though the other fields are invalid */
                      </Button>
                    </Grid>
                  )}
                </Fragment>

标签： javascriptreactjsdata-structuresmaterial-ui

Answer 1

您不必映射到整个表单，只需TextField像这样映射：

 return (
    <Fragment>
      {["Name", "E-Mail", "Phone"].map((item,index) => {
        let tempItem = tempItem.toLowerCase().replace("-", "");
        return (
        <Grid item key={index}>
          <TextField
            variant="outlined"
            id={tempItem}
            name={tempItem}
            label={item}
            onChange={formik.handleChange}
            error={
              formik.touched.tempItem
                ? formik.touched.tempItem && Boolean(formik.errors.tempItem)
                : null
            }
          />
        </Grid>
      )})}
      <Grid item>
        <Button
          disabled={formik.errors ? true : false}
          color="primary"
          variant="contained"
          type="submit"
        >
          Submit /* when I am trying to access the item and tempItem only the
          last of array is being accessible. As I am using formik to show
          errors, when I am clicking the submit button it should check error in
          all other fields, and if no errors then only the button should
          display, but in this case, the button checks only the last
          field(phone) and if its valid, submit button is showing even though
          the other fields are invalid */
        </Button>
      </Grid>
    </Fragment>
  );