Question

让我说我有这个组成部分：

export default class Test extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      test: false
    };
  }

  func1 = () => {
    function update() {
      this.setState({ test: true }); // not working
    }
  };

  render() {
    return <div />;
  }
}

您看到我有一个箭头形式的func1，并且以function update()形式有另一个函数更新

那么我如何从函数内部调用setState，如示例所示？

编辑：我试图做这样的事情的原因是我在一个叫做phaser的react组件内部使用了一个游戏引擎。所以实际上如果我由于某种原因将update函数作为一个箭头函数，phaser不能理解它并抛出未定义的error.update函数是每秒叫了60次

export default class Test extends React.Component {
      constructor(props) {
        super(props);

        this.state = {
          test: false
        };
      }
componentDidMount(){
this.func1()
}

      func1 = () => {
     var  game = new Phaser.Game(canvas_width,canvas_height,Phaser.AUTO,'gameDiv',{ preload: preload, create: create, update: update });

        function update() {
          this.setState({ test: true }); // not working
        }
      };

      render() {
        return <div />;
      }
    }

第二编辑：谢谢玩家在var游戏解决之前写了update = update.bind（this）

Answer 1

您可以将this作为参数传递，也许可以在函数中将其称为self。即self.setState。您也可以bind或call传递this作为参数的函数。重要的是this仍引用正确的React组件。

另外，我有点困惑为什么您要定义一个返回这样的函数的函数。您能以无点形式传递函数，而不用担心这个问题吗？您仍然需要将该函数绑定到this。.

export default class Test extends React.Component {
  constructor(props) {
    super(props);
    this.func1 = this.func1.bind(this)
    this.state = {
      test: false
    };
  }

  func1() {
    this.setState({ test: true });
  };

  render() {
    return <div callback={this.func1} />;
  }
}

Answer 2

您可以再次使用箭头功能：

class Test extends React.Component {
    
  constructor(props) {
    super(props);

    this.state = {
      test: false

    };
  }

  func1 = () => {

    const update = () => {
      this.setState({ test: true }) // not working
    }
    return update;
  }

  componentDidMount() {
    this.func1()();
  }

  render() {
    console.log( this.state);
    return (
      <div></div>
    )

  }
}

ReactDOM.render(<Test />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

使用常规函数时，也会失去this范围。使用箭头功能时，可以像使用第一个功能一样使用它而不必担心this。但是，不是可以正常工作的箭头功能：

func1 = () => {
    const that = this;
    return function update() {
      that.setState({ test: true }); // not working
    }
}

甚至@@ Tholle在他的评论中建议使用bind：

func1 = () => {
    return ( function update() {
      this.setState({ test: true }); // not working
    }).bind(this);
}

此外，您可以分别定义它们，并在func1内部调用update函数。

func1 = () => {
    this.update();
};

update() {
  this.setState({ test: true }); // not working
}

这也是可行的，因为您将func1函数自动绑定到this并从那里调用update函数，保持范围this。

ReactJS如何调用setState嵌套函数

2 个答案: