Question

序言，我是一个超级菜鸟，但还是这样：

我正在使用React，一个用户输入一个登录页面，我想用JQuery和RegEx抓取该登录页面，并用该值更新状态。

我的问题是，即使这些函数返回了正确的值（至少在控制台中看到了正确的值），该状态也不会更新使用Jquery和RegEx抓取外部登录页面的值。

下面，我在HTML输入中的onChange是我“应该”更新状态的地方。函数getProduct1Title应该（正确地）返回正确的值，但是状态键“ Product1Title”仍未定义。

onChange={e =>
    this.setState({
    product1URL: e.target.value,
    product1Title: this.getProduct1Title(e.target.value)
    })
}

getProduct1Title = e => {
    $.get(e, function(response) {
        var title = response.match(
            /<h1 class="semi-bold h1">(.*)<\/h1>/
        )[1];
        console.log(title);
        return title;
    });
};

我希望在console.log状态时，我能看到所有键的正确值。目前，我在product1URL的状态下看到了所有正确的URL，但是要求我使用Jquery和Regex的值（例如product1Title）是“未定义”。

Answer 1

$.get是异步的，因此无法使用其promise被解析的状态来设置状态。

onChange={e =>
    const url = e.target.value;

    $.get(url, function(response) {
        var title = response.match(
            /<h1 class="semi-bold h1">(.*)<\/h1>/
        )[1];

        this.setState({
            product1URL: e.target.value,
            product1Title: this.getProduct1Title(e.target.value)
        });
    });
}

为什么不反应状态更新特定值？

1 个答案: