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不受您的promise的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预设阶段2 ，则可以使用箭头功能来实现

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