如何在react (浏览器扩展)中设置defalulValue或存储值

Question

由于没有使用react的经验，我正在开发一个带有reactJS的浏览器扩展(chrome和firefox)，并在用户登录之后使用它，即使UI设置为我想要的默认值，但功能并未实现。然而，在用户选择一个选项之后，该功能就可以工作了。

这是我的状态：

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

  };