Question

我创建了一个组件，其中包含用于验证youtube url的表单，该表单的state属性根据输入到输入字段中的url（或任何值）是否有效，评估为true或false是否使用youtube网址。

函数validateUrl()是负责根据URL是否有效返回布尔值的函数，问题是尽管该函数返回true，但每次击键时组件的状态都在true和false之间切换。 Click here to see a visual representation

代码如下：

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（）异步有关吗？如果是这样，我将如何解决此问题？

Answer 1

问题由正则表达式上的test方法引起。您需要从正则表达式中删除全局标志（/ g）。

如果正则表达式设置了全局标志，则test（）将使正则表达式的lastIndex。随后使用test（）将启动搜索由lastIndex（exec（）将指定的str的子字符串还可以推进lastIndex属性）。值得注意的是测试其他字符串时，lastIndex不会重置。

参考：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/test

尽管值是true，但设置为状态的布尔值本身会自动切换

1 个答案: