Javascript 设置为状态的布尔值在其上切换'；她自己的价值是真实的

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

函数

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>
    );
  }
}

constyoutubergex=/^（https？\：\/\/）？（www\）？（youtube\.com | youtu\？be）\/。+$/gi；
类转换器扩展组件{
状态={
id:null，
url:“”，
urlValid:false
};
/**
*设置用户输入时的状态
*@params{Object}事件
*@returns{void}
*/
handleChange=事件=>{
const{value}=event.target；
const valid=this.validateUrl（值）；
这是我的国家({
id:Math.floor（Math.random（）*100），
url:value，
urlValid:valid
});
};
validateUrl=url=>{
返回youtubergex.test（url）；
};
handleSubmit=事件=>{
…提交的逻辑
};
render（）{
返回(
{this.state.urlValid.toString（）+“”+this.state.url}

提交
);
}
}

不要介意变量的名称等等，我在调试时已经更改了几次。我已经检查了stackoverflow类似的情况，我发现最接近的一个是切换布尔状态，我相信我的情况是完全不同的

---

这与setState（）是异步的有关吗？如果是这样，我将如何着手解决这个问题？

问题在于正则表达式上的

测试方法。您需要从正则表达式中删除全局标志（/g）

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

参考：