ルートコンポーネントの状態が変わっていないのはなぜですか？

Question

これは私のルートコンポーネントです。最初の状態のurl詳細の配列をtab_listに渡します。この配列は、各URLに対して個別のtab_itemを表示します。私はまた、URLを削除する関数を渡していますが、私はそれを行い、状態を変更するとき、状態はそれによって影響を受けません。 ：

import React, { Component, PropTypes } from 'react'; 
import { Provider } from 'react-redux'; 
import TabList from './tab_list.js'; 

export default class Root extends Component { 

    constructor(props, context) { 
    super(props, context); 
    this.state = { 
     tabs: this.props.tabs 
    }; 
    }; 

    removeURL(key) { 
    console.log("This is the Key " , key); 
    chrome.storage.local.get({urls: []}, function (result) { 
     var urls = result.urls; 
     urls = urls.filter(function(obj) { 
     return obj.id != key; 
     }); 
     this.state = { 
     tabs: urls 
     }; 
     chrome.storage.local.set({urls: urls}, function() {}); 
    }); 
    } 

    render() { 
    return (
     <div> 
      <TabList tabs={this.state.tabs} remove_url={this.removeURL.bind(this)}/> 
     </div> 
    ); 
    } 
} 

は、これは私のtab_listコンポーネントである -

import React, { Component } from 'react'; 
import TabItem from './tab_item'; 

export default class TabList extends Component { 
    render() { 
    return (
     <ul> 
     {this.props.tabs.map(function(tab, i) { 
      return <TabItem url={tab.url} url_id={tab.id} key={i} id={i} remove_url={this.props.remove_url}/>; 
     }.bind(this))} 
     </ul> 
    ); 
    } 
} 

そして、これは私のtab_itemコンポーネントです - あなたはあなたのストレージ・コールバックでSETSTATEを呼び出す必要が

import React, { Component } from 'react'; 

export default class TabItem extends Component { 
    render() { 
    var self = this; 
    return (
     <div> 
      <li>{this.props.url}</li> <img src="img/ic_clear_black_24dp_1x.png" onClick={() => self.onClick(this.props)}/> 
     </div> 
    ); 
    } 

    onClick(props) { 
    this.props.remove_url(this.props.url_id); 
    } 

} 

Answer 1

chrome.storage.local.get({urls: []}, function (result) { 
     var urls = result.urls; 
     urls = urls.filter(function(obj) { 
     return obj.id != key; 
     }); 
     this.setState({ 
     tabs: urls 
     }); 
     chrome.storage.local.set({urls: urls}, function() {}); 
    }.bind(this));