setState（）不觸發重新渲染

Question

這段代碼有什麼內在的錯誤嗎？

部分的問題是這樣的：

// Update state and trigger re-render 
// NOT WORKING 
this.setState({ subsections }); 

國家沒有被置位，當我打電話的setState（）。儘管數據存在於subsections對象中。我在其他方法上使用了相同的代碼模式，並按預期工作。

數據也保存在Parse中，如果我刷新它的頁面。

import React from "react"; 
import Parse from 'parse'; 

import Subsections from './Subsections'; 
import AddSubsectionForm from './AddSubsectionForm'; 

class Manage extends React.Component { 
    constructor() { 
    super(); 

    this.addSubsection = this.addSubsection.bind(this); 

    // Set initial state 
    this.state = { 
     subsections: {} 
    }; 
    } 

    addSubsection(subsection) { 
    // Make copy of state 
    const subsections = {...this.state.subsections}; 

    // Create new object 
    var SubsectionTest = Parse.Object.extend('SubsectionTest'); 
    var subsectionTest = new SubsectionTest(); 

    // Save object, then update state on return 
    subsectionTest.save({ 
     name: subsection.name, 
     description: subsection.description 
    }).then(function(newSubsection) { 
     console.log('Has saved id of: '+newSubsection.id); 

     // Add new subsection to local state 
     subsections[newSubsection.id] = subsection; 

     // Log updatd subsections object 
     console.log(subsections); 

     // Update state and trigger re-render 
     // NOT WORKING 
     this.setState({ subsections }); 
    }, 
    function(error) { 
     console.log('Error:'); 
     console.log(error); 
    }); 
    } 

    /* 
    Loads subsections from Parse and displays them. 
    Code removed for clarity. 
    */ 
    componentWillMount() { 
    this.loadMenuItems(); 
    } 

    render() { 
    if (this.state.subsections) { 
     return (
     <div className="subsections"> 
      <div className="mt3 border-top"> 
      <h3 className="mt1 bold s2">Subsections</h3> 

      <div className="mt1"> 
       <Subsections subsections={this.state.subsections} /> 
      </div> 
      </div> 

      <div className="mt3 border-top"> 
      <AddSubsectionForm addSubsection={this.addSubsection}/> 
      </div> 
     </div> 
    ) 
    } 
    } 
} 

export default Manage; 

Answer 1

您的問題是this未在承諾的then處理程序的約束：

}).then(function(newSubsection) { 

由於您使用的ES2015班，你大概可以使用箭頭功能（結合this其詞法範圍）：

}).then(newSubSection => { 

另一種選擇是將其明確綁定：

}).then(function(newSubsection) { 
... 
}.bind(this)); 

Answer 2

的this的上下文丟失，你可以嘗試回調結合this

var callback = function (newSubsection) { 
     console.log('Has saved id of: ' + newSubsection.id); 
      ..... 
     this.setState({ 
      subsections 
     }); 
    }; 
    callback = callback.bind(this); 
    subsectionTest.save({ 
     name: subsection.name, 
     description: subsection.description 
    }).then(callback), 
    function (error) { 
     console.log('Error:'); 
     console.log(error); 
    }); 

如果您正在使用Babel preset stage 2您可以通過使用箭頭功能達致這

 description: subsection.description 
     }).then(newSubsection = > { 
       console.log('Has saved id of: ' + newSubsection.id);