Warum ändert sich der Status der Root-Komponente nicht?

Question

Dies ist meine Root-Komponente, sie übergibt ein Array von URL-Details im Ausgangszustand an tab_list, die einzelne tab_item für jede URL darstellt. Ich übergebe auch eine Funktion, um die URL zu löschen, aber wenn ich das tue und Änderungen im Zustand mache, wird der Zustand davon nicht betroffen. :

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

Das ist mein tab_list Komponente -

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

Und das ist mein tab_item Komponente -

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

Sie benötigen setState in Ihrem Speicher Rückruf anrufen

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