リアクションマッピングの小道具で新しい要素を作成する方法

Question

で要素を作成しようとしています。を反応させますが、this.propsのように見えます。私が現在持っているものは新しい要素を生み出しません。私は様々な答えを見て、それらを模倣しようとしましたが、幸運はありませんでした。

React.createClass({ 
getDefaultProps: function() { 
    var items = []; 
    chrome.storage.local.get(null, function(result) { 
     var keys = Object.keys(result); 
     // get all the keys from chrome storage and add to array items 
     for (var i = 0; i < keys.length; i++) { 
      items.push(keys[i]); 
     } 
    }) 
    return { 
     items: items 
    } 
}, 
render: function() { 
    // display an element with name of key 
    return (
     <div> 
     {this.props.items.map(function loop(item, i) { 
      return (<div>{item}</div>) 
     })} 
     </div> 
    ) 
} 
}) 

しかし、this.props.itemsの代わりにリテラル配列を使用すると、新しい要素が得られます。私がここで紛失しているアイデアは何ですか？

Answer 1

chrome.storageは非同期です：

一括読み取りおよび書き込み操作を、そのため ブロックとシリアルのlocalStorage APIよりも高速でそれは非同期です。

この

は、コール前 getDefaultProps仕上げが戻ってくることを意味し、初期状態は { items: [] }です。 、それを修正 'componentDidMount'にストレージへの要求を行い、データが到着したときの状態を設定するには：私はgetInitialState内の項目を定義し、レンダリングにthis.state.items.map使用する場合

React.createClass({ 

    getDefaultProps: function() { 
     return { 
      items: [] // initial is empty 
     } 
    }, 

    componentDidMount: function() { // the component has be rendered for the 1st time 
     chrome.storage.local.get(null, function(result) { // receive the items 
      var keys = Object.keys(result); 
      // get all the keys from chrome storage and add to array items 
      for (var i = 0; i < keys.length; i++) { 
       items.push(keys[i]); 
      } 

      this.setState({ items: items }); // set the state 
     }.bind(this)) // bind the callback to the component's this, so you can use this.setState 
    }, 

    render: function() { 
     // display an element with name of key 
     return (
      <div> 
      {this.props.items.map(function loop(item, i) { 
       return (<div>{item}</div>) 
      })} 
      </div> 
     ) 
    } 

})