Как установить defalulValue или сохраненное значение в реакции (расширение браузера)

Question

Имея небольшой опыт работы с реагировать, я работаю над расширением браузера (chrome и firefox) с reactJS и использую его, но после того, как пользователи войдут в него, даже если для пользовательского интерфейса задано мое предполагаемое значение по умолчанию, но функциональность не реализуется. Однако после того, как пользователь выбирает опцию, функциональность работает.

Вот мое состояние:

... 
 state {
  mode: 'mode-1'
 }
...

мои функции:

  onChange = e => {
   let newMode = e.target.value

   this.setState({
     mode: newMode
    })
    this.handleChanges(newMode)
 };

  handleChanges=(setMode)=> {
   chrome.storage.local.set({ 'mode': setMode })
 }
  getStoredMode= () => {
   chrome.storage.local.get(['mode'], (result) => {
   ...
  }
 }
  componentDidMount () {
   this.getStoredMode()
  }

Мои радиокомпоненты (Ant -design):

<RadioGroup onChange={this.onChange} className="radio__group" value={this.state.mode}>

<Radio defaultChecked={true} className="radio__group-text" value='mode-1'>
    <span className='radio__group-span'>mode-1</span>
</Radio>

<Radio className="radio__group-text" value='mode-2'>
    <span className="radio__group-span">mode-2</span>
</Radio>

<Radio className="radio__group-text" value='mode-3'>
    <span className="radio__group-span">mode-3</span>
</Radio>

</RadioGroup>

Любые предложения по настройке этой кнопки-переключателя будут приняты с благодарностью. Спасибо

Answer 1

Я проверил ваш код песочницы. Вы должны добавить проверку, если в хранилище chrome ничего нет, а затем получить значение по умолчанию из state.

 storedModeInLocalStorage = () => {
     chrome.storage.local.get(['mode'], function(result) {
        let value = result.mode || this.state.mode;
        console.log('Value currently is ' + value );
     });

  };