Javascript 无法读取未定义的道具

我正在尝试为select语句添加类窗体控件。然而，出现了一个问题。这表明道具是未定义的

代码如下：

const useStyles = makeStyles({
  root: {
    width: "100%",

    maxWidth: 500
  }
});

const classes = {
      formControl: {
        margin: this.props.theme.spacing(1),
        minWidth: 120,
      },
      selectEmpty: {
        marginTop: this.props.theme.spacing(2),
      },
    };

export class FormUserDetails extends Component {
  constructor(props) {
    super(props);
    this.state = { KPI: [], addModalShow: false,age: "",
      name: "hai" };
  }
  continue = e => {
    e.preventDefault();

    if (document.getElementById("Title").value.length < 5) {
      document.getElementById("title").style.visibility = "visible";
      document.getElementById("Title").style.border = "1px solid red";
      // keep form from submitting
    } else if (document.getElementById("Details").value.length < 10) {
      document.getElementById("details").style.visibility = "visible";
      document.getElementById("Details").style.border = "1px solid red";
      // keep form from submitting
    } else if (document.getElementById("What").value.length < 10) {
      document.getElementById("what").style.visibility = "visible";
      document.getElementById("What").style.border = "1px solid red";
      // keep form from submitting
    } else if (document.getElementById("Why").value.length < 10) {
      document.getElementById("why").style.visibility = "visible";
      document.getElementById("Why").style.border = "1px solid red";
      // keep form from submitting
    } else if (document.getElementById("How").value.length < 10) {
      document.getElementById("how").style.visibility = "visible";
      document.getElementById("How").style.border = "1px solid red";
      // keep form from submitting
    } else if (document.getElementById("Implementation_Status").value == "") {
      document.getElementById("status").style.visibility = "visible";
      document.getElementById("Status").style.border = "1px solid red";
      // keep form from submitting
    } else if (document.getElementById("Cost").value.length < 1) {
      document.getElementById("cost").style.visibility = "visible";
      document.getElementById("Cost").style.border = "1px solid red";
      // keep form from submitting
    } else if (document.getElementById("Benefits").value.length < 10) {
      document.getElementById("benefits").style.visibility = "visible";
      document.getElementById("Benefits").style.border = "1px solid red";
      // keep form from submitting
    } else {
      // else form is good let it submit, of course you will
      // probably want to alert the user WHAT went wrong.

      this.props.nextStep();
    }
  };

  handleSubmit(event) {
    event.preventDefault();
    fetch("https://localhost:44384/api/Details", {
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json"
      },
      body: JSON.stringify({
        TBD_ID: null,
        TBD_TITLE: event.target.Title.value,
        TBD_WHAT: event.target.What.value,
        TBD_WHY: event.target.Why.value,
        TBD_HOW: event.target.How.value,
        TBD_STAGE: 1,
        TBD_STATUS: event.target.Implementation_Status.value,
        TBD_COST: event.target.Cost.value,
        TBD_BENEFIT: event.target.Benefits.value,
        TBD_BENEFIT_TYPE: 1,
        TBD_FL_ACTIVE: null,
        TBD_CRT_ID: null,
        TBD_CRT_TS: null,
        TBD_UPD_ID: null,
        TBD_UPD_TS: null,
        TBD_VALUE_ID: 2
      })
    })
      .then(res => res.json())
      .then(
        result => {
          alert(result);
        },
        error => {
          alert("Failed");
        }
      );
  }

  //1
  handleChangeRows = idx => e => {
    const { Kpi_Before, value } = e.target;
    const rows = [...this.state.rows];
    rows[idx] = {
      [Kpi_Before]: value
    };
    this.setState({
      rows
    });
  };

  //2
  handleAddRow = () => {
    const item = {
      KPI_Before: "",
      UOM_Before: "",
      Base_Before: "",
      Target_Before: "",
      dateTime: ""
    };
    this.setState({
      rows: [...this.state.rows, item]
    });
  };

  //3
  handleRemoveRow = () => {
    this.setState({
      rows: this.state.rows.slice(0, -1)
    });
  };

  render() {
    const { values, handleChange } = this.props;
    const { deps } = this.state;
    let { values1 } = this.state;
    let addModalClose = () => this.setState({ addModalShow: false });

    return (
      <MuiThemeProvider theme={theme}>
        <React.Fragment>
          <div className={useStyles.root}>
            <Grid item xs={12}>
              <AppBar position="static">
                <Toolbar>
                  <NavLink to="dashboard">
                    <DashboardIcon style={{ color: "white" }} />
                  </NavLink>
                  <Typography
                    align="center"
                    style={{ width: "100%", alignItems: "center" }}
                  >
                    Best Practices Management System
                  </Typography>
                </Toolbar>
              </AppBar>
            </Grid>
          </div>
          <br />
          <Form onSubmit={this.handleSubmit} style={{ marginLeft: "5%" }}>
            <Grid container>
              <Grid item xs={12}>
                <TextField
                  label="Title"
                  variant="outlined"
                  size="small"
                  name="Title"
                  id="Title"
                  placeholder="Enter the Title of the Best Practice"
                  onChange={handleChange("Title")}
                  defaultValue={values.Title}
                  multiline
                  rows={1}
                  rowsMax={4}
                  style={{ width: "95%" }}
                />
                <label
                  id="title"
                  style={{ visibility: "hidden", color: "red" }}
                >
                  Title must be atleast 5 characters long
                </label>
              </Grid>
            </Grid>

            <Grid container>
              <Grid item xs={6}>
                <TextField
                  placeholder="Enter the details of the Best Practice"
                  label="Details of Best Practice"
                  id="Details"
                  size="small"
                  name="Details"
                  onChange={handleChange("Details")}
                  defaultValue={values.Details}
                  style={{ width: "90%" }}
                  variant="outlined"
                  multiline
                  rows={2}
                  rowsMax={4}
                />
                <label
                  id="details"
                  style={{ visibility: "hidden", color: "red" }}
                >
                  Details of Best Practice must be atleast 10 characters long
                </label>
              </Grid>

              <Grid item xs={6}>
                <TextField
                  placeholder="What is the Best Practice?"
                  label="What is the Best Practice"
                  size="small"
                  id="What"
                  name="What"
                  onChange={handleChange("What")}
                  defaultValue={values.What}
                  style={{ width: "90%" }}
                  variant="outlined"
                  multiline
                  rows={2}
                  rowsMax={4}
                />
                <label id="what" style={{ visibility: "hidden", color: "red" }}>
                  What is the Best Practice must be atleast 10 characters long
                </label>
              </Grid>
            </Grid>

            <Grid container>
              <Grid item xs={6}>
                <TextField
                  placeholder="Why was the Best Practice Implemented"
                  label="Why was the Best Practice Implemented"
                  size="small"
                  name="Why"
                  id="Why"
                  onChange={handleChange("Why")}
                  defaultValue={values.Why}
                  style={{ width: "90%" }}
                  variant="outlined"
                  multiline
                  rows={2}
                  rowsMax={4}
                />
                <label id="why" style={{ visibility: "hidden", color: "red" }}>
                  Why was the Best Practice implemented must be atleast 10
                  characters long
                </label>
              </Grid>

              <Grid item xs={6}>
                <TextField
                  placeholder="How was the Best Practice Implemented"
                  label="How was the Best Practice Implemented"
                  size="small"
                  name="How"
                  id="How"
                  onChange={handleChange("How")}
                  defaultValue={values.How}
                  style={{ width: "90%" }}
                  variant="outlined"
                  multiline
                  rows={2}
                  rowsMax={4}
                />
                <label id="how" style={{ visibility: "hidden", color: "red" }}>
                  How was the Best Practice implemented must be atleast 10
                  characters long
                </label>
              </Grid>
            </Grid>

            <Grid container>
              <Grid item xs={6}>
                <FormControl id="Status" style={{ width: "90%" }} size="small">
                  <AddProcessModal
                    show={this.state.addModalShow}
                    onHide={addModalClose}
                  />
                  <InputLabel
                    htmlFor="Implementation_Status"
                    id="Status"
                    style={{
                      marginLeft: 10,
                      top: "50%",
                      transform: "translate(0,-50%"
                    }}
                  >
                    Implementation Status
                  </InputLabel>
                  <Select
                    labelId="Implementation_Status"
                    name="Status"
                    id="Status"
                    onChange={handleChange("Status")}
                    defaultValue={values.Status}
                    variant="outlined"
                    inputProps={{
                      id: "Implementation_Status",
                      name: "age"
                    }}
                  >
                    <MenuItem value="1">Implemented</MenuItem>
                    <MenuItem value="2">Implementation in Progress</MenuItem>
                    <MenuItem value="3">Not Implemented</MenuItem>
                  </Select>
                </FormControl>
                <label
                  id="status"
                  style={{ visibility: "hidden", color: "red" }}
                >
                  Implementation Status cannot be blank
                </label>
              </Grid>

              <Grid item xs={6}>
                <Form.Group controlId="TBD_COST">
                  <TextField
                    placeholder="Cost of Implementation of the Best Practice"
                    label="Cost of Implementation"
                    name="Cost"
                    id="Cost"
                    size="small"
                    onChange={handleChange("Cost")}
                    defaultValue={values.Cost}
                    style={{ width: "90%" }}
                    variant="outlined"
                  />
                  <label
                    id="cost"
                    style={{ visibility: "hidden", color: "red" }}
                  >
                    Cost of Implementation cannot be left blank
                  </label>
                </Form.Group>
              </Grid>
            </Grid>

            <Grid container>
              <Grid item xs={6}>
                <TextField
                  placeholder="Benefits of the Best Practice"
                  label="Benefits of the Best Practice"
                  size="small"
                  name="Benefits"
                  id="Benefits"
                  onChange={handleChange("Benefits")}
                  defaultValue={values.Benefits}
                  style={{ width: "90%" }}
                  variant="outlined"
                  multiline
                  rows={2}
                  rowsMax={4}
                />
                <label
                  id="benefits"
                  style={{ visibility: "hidden", color: "red" }}
                >
                  Benefits must be at least 10 characters long
                </label>
              </Grid>

              <Grid item xs={6}>
                <FormControl className={classes.formControl} id="Process" style={{ width: "78%" }} size="small">
                  <InputLabel
                    htmlFor="Process"
                    id="Process"
                    style={{
                      marginLeft: 10,
                      top: "50%",
                      transform: "translate(0,-50%"
                    }}
                  >
                    Process
                  </InputLabel>
                  <Select
                    labelId="Process"
                    name="Process"
                    id="Process"
                    value={this.state.Process}
                    defaultValue={values.Process}
                    onChange={() => this.setState({ addModalShow: true })}
                    variant="outlined"
                    InputLabelProps={{
                      shrink: this.state.value ? true : false
                    }}
                    inputProps={{
                      name: "Process",
                      id: "Process"
                    }}
                  >
                  <option aria-label='None' value='' />
                    <option value={10}>Ten</option>
                    <option value={20}>Twenty</option>
                    <option value={30}>Thirty</option>
                  </Select>
                </FormControl> 
    
  

                <Button
                  variant="outlined"
                  color="primary"
                  onClick={() => this.setState({ addModalShow: true })}
                  size="small"
                  style={styles.button2}
                >
                  +
                </Button>
                <label
                  id="process"
                  style={{ visibility: "hidden", color: "red" }}
                >
                  Process cannot be blank
                </label>
              </Grid>
            </Grid>

            <Grid
              direction="row"
              justify="right"
              alignItems="right"
              className="text-right"
              style={{ width: "96%" }}
            >
              <Button
                variant="contained"
                size="small"
                color="primary"
                style={styles.button}
                onClick={this.continue}
                className="float-right"
              >
                Continue
              </Button>
              <Button
                variant="contained"
                size="small"
                color="primary"
                type="submit"
                style={styles.button1}
              >
                Submit
              </Button>
            </Grid>
          </Form>
        </React.Fragment>
      </MuiThemeProvider>
    );
  }
}

const theme = createMuiTheme({
  palette: {
    primary: blue,
    secondary: purple
  },
  status: {
    danger: "orange"
  }
});

const styles =  {
  button: {
    align: "right",
    margin: 15,
    marginRight: "1%"
  },
  button1: {
    align: "right",
    margin:15,
    marginRight: "1%",
    backgroundColor: "#21b6ae"
  },
  button2: {
    margin: 2
  }
  
};

---

我只是用来添加主题的代码，但是您的代码中的道具存在问题，

此

可能指向

窗口

对象，因此它抱怨

道具未定义

你试过了吗

从'@materialui/core/styles'导入{makeStyles}；
const useStyles=makeStyles（（主题）=>({
表单控制：{
边距：主题。间距（1），
最小宽度：120，
},
选择空：{
marginTop：主题。间距（2），
},
}));

在你的组件里面

 const classes = useStyles();

---

道具抛出错误的是哪一行？

 const classes = useStyles();