Question

嗨，我有这个问题。我有输入和下拉列表，我需要从选项下拉列表中进行选择，并在输入上写入值，但是第一个值每次都是空的。我使用componentDidUpdate解决了此问题，并将locationValue设置为undefined。有时出现此错误后，如何解决？我需要更改生命周期方法还是什么？

这是代码

class AccordionForm extends Component {
  state = {
    value: '',
    locationValue: undefined,
  };

  componentDidUpdate() {
    const { nameOptions } = this.props;

    if (nameOptions && nameOptions && this.state.locationValue === undefined) {
      this.setState({
        locationValue: nameOptions[0],
      });
    }
  }

  handleChangeInputSelect = ({ target }) => {
    this.setState({
      locationValue: target.value,
    });
  };

  handleChangeInput = ({ target }) =>
    this.setState({
      value: target.value,
    });

  onSubmit = event => {
    const { value, locationValue } = this.state;
    const { handleSubmitForm } = this.props;

    event.preventDefault();

    handleSubmitForm(value, locationValue);
    this.setState({ value: '' });
  };

  render() {
    const { name, nameOptions } = this.props;
    const { value } = this.state;

    return (
      <Form className="accordion_form" name={name} onSubmit={this.onSubmit}>
        <FormGroup className="form-group-locations">
          {nameOptions && (
            <Input
              className="form-input"
              required
              name={name}
              type="select"
              onChange={this.handleChangeInputSelect}
            >
              {nameOptions.map((option, index) => {
                return (
                  <option key={index} value={option}>
                    {option}
                  </option>
                );
              })}
            </Input>
          )}
          <Input
            placeholder={`add new ${name}...`}
            type="text"
            required
            name={name}
            value={value}
            onChange={this.handleChangeInput}
            className="form-input"
          />
          <Button className="tagBtn" color="success" type="submit">
            Add
          </Button>
        </FormGroup>
      </Form>
    );
  }
}

export default AccordionForm;

Answer 1

这可能是因为您的nameOptions[0]最初是未定义的。请更新您的if语句的条件，如下所示：

  componentDidUpdate() {
    const { nameOptions } = this.props;

    if (nameOptions && !!nameOptions.length && nameOptions[0] && this.state.locationValue !== nameOptions[0]) {
      this.setState({
        locationValue: nameOptions[0],
      });
    }
  }

如何修复无穷循环？

1 个答案: