Булево значение, установленное для переключения состояния самостоятельно, несмотря на значение true - PullRequest
Новая
       13

Булево значение, установленное для переключения состояния самостоятельно, несмотря на значение true

2 голосов
/ 14 июня 2019

Я создал компонент, который содержит форму, используемую для проверки URL-адресов YouTube, со свойством состояния, которое оценивается как истинное или ложное в зависимости от того, является ли URL-адрес (или любое значение), введенный в поле ввода, действительным URL-адрес YouTube или нет.

Функция validateUrl() ответственна за возвращение логического значения в зависимости от того, является ли URL действительным, проблема заключается в том, что несмотря на то, что эта функция возвращает true, состояние моего компонента переключается между true и false при каждом нажатии клавиши. Нажмите здесь, чтобы увидеть визуальное представление

Вот код: 

const youtubeRegex = /^(https?\:\/\/)?(www\.)?(youtube\.com|youtu\.?be)\/.+$/gi;

class Converter extends Component {
  state = {
    id: null,
    url: "",
    urlValid: false
  };

  /**
   * Sets state whenever user types
   * @params {Object} event
   * @returns {void}
   */

  handleChange = event => {
    const { value } = event.target;
    const valid = this.validateUrl(value);
    this.setState({
      id: Math.floor(Math.random() * 100),
      url: value,
      urlValid: valid
    });
  };

  validateUrl = url => {
    return youtubeRegex.test(url);
  };

  handleSubmit = event => {
    ...logic for submission
  };

  render() {
    return (
      <div className="Converter">
        <form onSubmit={this.handleSubmit}>
          <input
            value={this.state.url}
            onChange={this.handleChange}
            autoComplete="off"
            type="text"
            placeholder="Add a link to convert..."
          />
          <p>{this.state.urlValid.toString() + " " + this.state.url}</p>
          <button type="submit">Submit</button>
        </form>
      </div>
    );
  }
}

Не обращайте внимания на имена переменных и тому подобное, я несколько раз менял их, пытаясь это отладить. Я проверил stackoverflow для подобных ситуаций, и самая удаленная из обнаруженных мной была связана с переключением логического состояния, моя ситуация, на мой взгляд, совершенно иная.

Это связано с асинхронностью setState ()? Если да, то как мне решить эту проблему?

1 Ответ

3 голосов
/ 14 июня 2019

Проблема с методом test в Regex. Вам необходимо удалить глобальный флаг (/ g) из регулярного выражения.

Если для регулярного выражения установлен глобальный флаг, test () будет продвигать lastIndex регулярного выражения. Последующее использование test () запустит поиск по подстроке str, указанной в lastIndex (exec () также добавьте свойство lastIndex). Стоит отметить, что lastIndex не будет сброшен при тестировании другой строки.

Ссылка: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/test

...