проверка для response-select, получение Cannot read property 'length' of undefined - PullRequest
Новая
       105

проверка для response-select, получение Cannot read property 'length' of undefined

0 голосов
/ 19 июня 2020

Я новичок в реакции и использую response-select для выбора соответствующих отделов. Я пытаюсь проверить раскрывающийся список выбора, так что, если раскрывающийся список пуст, он выдаст сообщение об ошибке. Я не знаю, как именно это сделать. Он показывает эту ошибку:

Departments.continue 

D:/react_bpms1/src/components/Departments.js:69
  66 |   this.setState({ selectedOptions });
  67 | };
  68 | continue = e => {
> 69 |   if (document.getElementById("Departments").value.length < 1) {
     | ^  70 |     document.getElementById("departments").style.visibility = "visible";
  71 |     document.getElementById("Departments").style.border = "1px solid red";
  72 |   } else {








But here is what I am doing:


const Departments = [
  { label: "OneIT", value: "OneIT" },
  { label: "HR", value: "HR" },
  { label: "Vigilance", value: "Vigilance" },
  { label: "Ethics", value: "Ethics" },
  { label: "Corporate Services", value: "Corporate Services" },
  { label: "Legal", value: "Legal" },
  { label: "Sports", value: "Sports" },
  { label: "TQM", value: "TQM" },
  { label: "Iron Making", value: "Iron Making" },
  { label: "TMH", value: "TMH" }
];

class MultiSelect2 extends Component {
  state = {
    selectedOptions: []
  };
  handleChangeField = selectedOptions => {
    this.setState({ selectedOptions });
  };
  render() {
    const { selectedOption } = this.state;
    return (
      <div className="container">
        <div className="row">
          <div className="col-md-2"></div>
          <div className="col-md-8">
            <span>Select Department</span>
            <Select
              id="Departments"
              htmlFor="Departments"
              value={selectedOption}
              options={Departments}
              onChange={this.handleChangeField}
              isMulti
            />
            {this.state.selectedOptions.map(o => (
              <p>{o.value}</p>
            ))}
          </div>
          <div className="col-md-4"></div>
        </div>
      </div>
    );
  }
}

export default MultiSelect2;

Вот где я вызываю опцию Multiselect: 

export class Departments extends Component {
  state = {
    rows: [],
    idx: [],
    selectedOptions: []
  };
  handleChangeField = selectedOptions => {
    this.setState({ selectedOptions });
  };
  continue = e => {
    if (document.getElementById("Departments").value.length < 1) {
      document.getElementById("departments").style.visibility = "visible";
      document.getElementById("Departments").style.border = "1px solid red";
    } else {
      e.preventDefault();
      this.props.nextStep();
    }
  };
  back = e => {
    e.preventDefault();
    this.props.prevStep();
  };

  render() {
    const { values, handleChange } = this.props;
    const { selectedOption } = this.state;

    const {
      values: {
        Title,
        Details,
        What,
        Why,
        How,
        Status,
        Cost,
        Benefits,
        Kpi_Before,
        Kpi_After,
        UOM_Before,
        UOM_After,
        Base_After,
        Target_After,
        dateTime_After,
        Base_Before,
        Target_Before,
        Time,
        dateTime,
        departments,
        Departments,
        selectedOptions
      }
    } = this.props;

    return (
      <MuiThemeProvider theme={theme}>
        <React.Fragment>
          <div className={useStyles.root}>
            <AppBar position="static">
              <Toolbar>
                <Typography
                  gutterBottom
                  align="center"
                  style={{ width: "100%", alignItems: "center" }}
                >
                  Select Departments
                </Typography>
              </Toolbar>
            </AppBar>
          </div>
          <br />
          <br />
          <Grid container>
            <Grid item xs={6}>
              <MultiSelect2
                style={{ width: "80%" }}
                id="Departments"
                onChange={this.handleChangeField}
                value={selectedOption}
              />
              <label
                id="departments"
                style={{ visibility: "hidden", color: "red" }}
              >
                Select Applicable departments
              </label>
            </Grid>

1 Ответ

0 голосов
/ 19 июня 2020
• 1000 И это источник ошибки, поскольку компонент не может быть прикреплен к dom или дочерний компонент может быть не готов. Tbh, вы слишком ошибаетесь, чтобы внести незначительное обновление в свой код, чтобы исправить проблему.

Чтобы более конкретно ответить на ваш вопрос: вероятно, MultiSelect2 не отображается при возникновении события. Плохое решение, но может вас заинтересовать: объедините MultiSelect2 внутри Departments и используйте ref + state

ex: 

export class Departments extends Component {
 constructor(props) {
    super(props);
    this.state={
      departmentsStyle:{}
    };
    this.departmentsRef = React.createRef();
  }
  //...
  continue = e => {
    if (this.departmentsRef.current && this.departmentsRef.current.value.length < 1) {
       this.setState({
        departmentsStyle:{
          border:"1px solid red",
          visibility : "visible"
        }
       });
    } else {
      this.setState({
        departmentsStyle:{}
       });
      e.preventDefault();
      this.props.nextStep();
    }
  };
  //.... ETC ETC
  render() {
    //...
    return (
      ///...
      //The ref is forwarded to the root element 
      //(if it does not work use inputRef={departmentsRef})
      <Select ref={departmentsRef} style={this.state.departmentsStyle}
      //...
     )
}

Лучшее решение, которое я думаю: на данный момент единственное, что я бы посоветовал, - это если можно посмотреть Formik и перенести FormikBag в MultiSelect2. Тогда вы сможете лучше управлять компонентами с помощью состояния формы.

https://jaredpalmer.com/formik/docs/overview

удачи, всего наилучшего

...