陣營：告訴狀態類的實例已經變異

Question

我有這個類：

class MyClass { 
    constructor() { 
    this.value = 'foo'; 
    } 

    mutate() { 
    this.value = 'bar'; 
    } 
} 

而這在其狀態實例的組件：

let Component = React.createClass({ 
    getInitialState: function() { 
    return { 
     element: new Myclass() 
    }; 
    }, 
    mutateElement: function() { 
    this.state.element.mutate(); 
    } 
}); 

我怎樣才能讓<Component />知道this.state.element有變異，需要重新渲染？

使用React immutability Helpers不會爲以下語法工作是無效的：

mutate() { 
    this = update(this, {value: {$set: 'bar'}); 
} 

Answer 1

有兩種方式來進行此事。首先是簡單的方法：this.forceUpdate() 但具體反應tells以儘可能避免它。但我覺得你有一個有效的用例。

let Component = React.createClass({ 
    getInitialState: function() { 
     return { element: new Myclass() }; 
    }, 
    mutateElement: function(){ 
     this.state.element.mutate(); 
     this.forceUpdate(); 
    } 
}); 

但是，如果你想堅持不使用this.forceUpdate()你可以在狀態另一個變量和設置。

let Component = React.createClass({ 
    getInitialState: function() { 
     return { element: new Myclass(), 
     hasChanged: false }; 
    }, 
    mutateElement: function(){ 
     this.state.element.mutate(); 
     this.setState({hasChanged: true}); 
    } 
}); 

這會改變它並重新渲染你的組件。