javascript - React-我应该使用 promise 来设置状态吗？

Question

我正在尝试 js + React，但遇到了意外的行为:

在下面的示例中，虽然一开始似乎工作正常，但当 (this.state.progress.length%3==0) 按预期进行时，我没有得到分数变化。 p>

进度字符串似乎更新得很好，但分数每四次点击更新一次...

编辑:我应该查明问题的根源，因为人们都很忙，问题出在 handleClick()<子组件上的/code> 与同一组件中的 scoreUpdate() 进行交互(调用)。不过，我认为解决方案并不简单，因为问题末尾的 consol.log() 示例有效。

我组织代码的方式显然存在问题，但是什么？

我应该使用Promises来调用我的scoreUpdate()函数吗？

或者有更好的方法来解决这个问题吗？

子组件:

import React from 'react';

export class Child extends React.Component {

constructor(props) {
super(props);

this.state = { progress: "0",
               score: 0};
this.handleClick = this.handleClick.bind(this);
this.scoreUpdate = this.scoreUpdate.bind(this);
}

handleClick(e) {

let previous = this.state.progress;

let score = Number(e.currentTarget.id);

this.setState({progress: previous+e.currentTarget.id});

this.scoreUpdate(score);

}  

scoreUpdate(score) {


if (this.state.progress.length%3==0) {

let previous = this.state.score;

this.setState({score: previous+score}); }

}

render() {


return (
  <div>
    <ul>
      <li id="1" onClick={this.handleClick}>a</li>
      <li id="2" onClick={this.handleClick}>b</li>
    </ul>

    <p>progress</p>
    <p>{this.state.progress}</p>
    <p>progress length</p>
    <p>{this.state.progress.length}</p>
    <p>score</p>
    <p>{this.state.score}</p>
  </div>
);
}
}

父组件:

import React from 'react';
import ReactDOM from 'react-dom';
import {Child} from './components/Child';

class Parent extends React.Component {  

render() {

return (
  <Child />
);
}
}

ReactDOM.render(
<Parent />,
document.getElementById('app')
);

任何关于为什么会发生这种情况的有效见解/解释都将受到高度赞赏。让我困惑的是，当我在控制台中输入:

var b = 1;

function c() {
b=b+2;
d();
}

function d() {
console.log(b);
 }

c();

这将按预期返回 3。

如果您知道此问题有重复，请发表评论，以便我将其删除。

Answer 1

尝试这样:

handleClick(e) {

    let previous = this.state.progress;

    let score = Number(e.currentTarget.id);

    this.setState({progress: previous+e.currentTarget.id}, () => this.scoreUpdate(score));

}  

scoreUpdate(score) {


    if (this.state.progress.length%3==0) {

    let previous = this.state.score;

    this.setState({score: previous+score}); }

}