Reactjs 如何在react（浏览器扩展）中设置默认值或存储值

我对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设计）：

模式1
模式2
模式3

任何关于使这个单选按钮工作的建议都将不胜感激

---

谢谢

我检查了你的代码沙箱。如果chrome存储器中没有任何内容，您应该添加一个检查，然后从

状态

获取一个默认值

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

  };

---

能否提供在线工作代码段？我尝试在此处重新创建代码，但由于它是浏览器扩展，因此我必须使用chrome.storage API：

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

  };