Как использовать реагировать SetState с хромированной API

Question

Я хочу использовать РЕАКТ setState с хромированной API, но я бегу на вопрос ...

componentDidMount() { 

    chrome.runtime.onMessage.addListener(function(request, sender) { 
     if (request.action == "getSource") { 
      this.setState({sourceCode: request.source}); 
     } 
    }); 
} 

Я попытался следующие, но хром API не распознает setState, как функция, поэтому я попытался сначала сохранить request.source как переменные ...

componentDidMount() { 
    var source = ""; 
    chrome.runtime.onMessage.addListener(function(request, sender) { 
     if (request.action == "getSource") { 
      source = request.source; 
     } 
    }); 
    this.setState({sourceCode: source}); 
} 

Но когда я пытаюсь следующим, source остается пустой строкой. Я не могу понять, почему с source устанавливается значение request.source. Как я могу это исправить?

EDIT

Я зову сценарий как так ...

chrome.tabs.executeScript(null, { 
     file: 'src/js/scripts/getPageSource.js' 
    }, function() { 
    ... 

и внутри сценария У меня есть следующие ...

chrome.runtime.sendMessage({ 
    action: "getSource", 
    source: DOMtoString(document) 
}); 

Где DOMtoString функция просто возвращает строку. Это поймано моим componentDidMount, которое я проверил, распечатав на консоли внутри оператора if.

Пришло к сведению, что addListener является асинхронным. Есть ли способ сохранить результат в состоянии?

Answer 1

Вы должны связать this так неизменна в слушателе событий

chrome.runtime.onMessage.addListener(function(request, sender) { 
    if (request.action == "getSource") { 
     this.setState({sourceCode: request.source}); 
    } 
}.bind(this)); 

Ваша вторая попытка не работает, потому что обратный вызов асинхронной. Вам нужно позвонить setState, когда возвращается обратный вызов. Во второй попытке вы регистрируетесь для слушателя, но затем немедленно вызов setState.

Редактировать: Вместо этого вы можете переключиться на использование arrow functions. Это лексически связывает this, поэтому оно не изменится.

chrome.runtime.onMessage.addListener((request, sender) => { 
    if (request.action == "getSource") { 
     this.setState({sourceCode: request.source}); 
    } 
});