Как отобразить текст после нажатия на кнопку, которая отправляет текущий URL на вызов API

Question

Я пытаюсь сделать вызов API в этом реактивном проекте при нажатии кнопки. Вызов API является вызовом POST, и он должен отправить текущий URL. Этот проект является расширением chrome.

import React from 'react';
import ReactDOM from 'react-dom';

import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import Backdrop from '@material-ui/core/Backdrop';
import CircularProgress from '@material-ui/core/CircularProgress';

import NavigationBar from './core/NavigationBar';

class Extension extends React.Component {

    constructor(props) {
        super(props);
        this.state = { 'summary': "test", 'loading': false, "dis":true};
        this.summarize = this.summarize.bind(this);
    }

    summarize() {
        let url = "f";
        this.setState({
            'loading': true,
        })
        chrome.tabs.query({currentWindow: true, active: true}, function (tabs) {

            fetch('https:example:3434/somewhere', {
                credentials: 'include',
                headers: {'Content-Type': 'application/json'},
                method: 'POST',
                body: JSON.stringify({
                    "url": tabs[0].url
                })
            })
                .then((response) => {
                    if (!response.ok) throw Error(response.statusText);
                    return response.json();
                })
                .then((data) => {
                    if (data.response == "success") {
                        if (data.summary === "") {
                            data.summary = "We couldn't generate a summary for that URL.";
                        }
                        alert(data.summary);
                        this.setState({
                            'summary': data.summary,
                            'dis': true,
                        })
                    }
                })
                .catch((error) => console.log(error));
        }).bind(this);
        this.setState({
            'loading': false,
        })
    }

    render() {
        return (
            <div>
                <NavigationBar />
                <Backdrop className="backdrop" open={this.state.loading}>
                    <CircularProgress color="inherit" />
                </Backdrop>
                <div>
                    <h2>Let's breeze through this article</h2>
                    <img id="read-ship-logo" src="/static/img/readship.svg" />
                </div>
                <div>
                    <Button variant="contained" color="primary" onClick={this.summarize}>Summarize</Button>
                </div>
                <p>
                    {this.state.dis ? this.state.summary:''}
                </p>

            </div>
        );
    }
}

ReactDOM.render(
    <Extension />,
    document.getElementById('extension')
)

Обычно, когда кто-то нажимает на кнопку, вызывается функция суммирования. Затем URL-адрес находится в блоке chrome.tabs.query. Используя этот URL, вызывается, и он должен обновить this.state.summary, но это не так. Также {this.state.dis ? this.state.summary:''} не обновляется. У кого-нибудь есть идеи?