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