状態が変更されたときに反応してレンダリングが呼び出されないのはなぜですか？

Question

状態が変更されたときに自動的に表示を再描画することに問題があります。 状態は変更されましたが、render()は呼び出されません。しかし、私がthis.forceUpdate()と呼ぶとき、すべては大丈夫ですが、私はそれが最善の解決策ではないと思います。 誰かが私を助けることができますか？

class TODOItems extends React.Component { 

constructor() { 
    super(); 

    this.loadItems(); 
} 

loadItems() { 
    this.state = { 
     todos: Store.getItems() 
    }; 
} 

componentDidMount(){ 
    //this loads new items to this.state.todos, but render() is not called 
    Store.addChangeListener(() => { this.loadItems(); this.forceUpdate(); }); 
} 

componentWillUnmount(){ 
    Store.removeChangeListener(() => { this.loadItems(); }); 
} 

render() { 

    console.log("data changed, re-render"); 
    //... 
}} 

Answer 1

あなたは初期状態を宣言しているコンストラクタから（自分のloadItems()方法のように）this.state = {};を使用する必要があります。アイテムを更新する場合は、this.setState({})を使用してください。あなたのコンポーネントで

Store.addChangeListener(() => { this.reloadItems(); }); 

Answer 2

this.stateを直接変更してはいません。 this.setStateメソッドを使用する必要があります。

変更loadItems：

loadItems() { 
    this.setState({ 
     todos: Store.getItems() 
    }); 
} 

More in react docs

Answer 3

、あなたが直接あなたが以下を使用する必要がある状態を操作するたびに：

constructor() { 
    super(); 

    this.state = { 
     todos: Store.getItems() 
    }; 
} 

reloadItems() { 
    this.setState({ 
     todos: Store.getItems() 
    }); 
} 

とあなたのcomponentDidMountを更新します。たとえば

this.setState({}); 

完全なコード：

class TODOItems extends React.Component { 

constructor() { 
    super(); 

    this.loadItems(); 
} 

loadItems() { 
    let newState = Store.getItems(); 
    this.setState = { 

     todos: newState 
    }; 
} 

componentDidMount(){ 
    //this loads new items to this.state.todos, but render() is not called 
    Store.addChangeListener(() => { this.loadItems(); this.forceUpdate(); }); 
} 

componentWillUnmount(){ 
    Store.removeChangeListener(() => { this.loadItems(); }); 
} 

render() { 

    console.log("data changed, re-render"); 
    //... 
}}