React-我应该使用承诺来设置状态吗？

Question

我正在尝试使用 js + React，但遇到了意想不到的行为：

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

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

编辑：我应该指出问题的根源，因为 ppl 很忙，问题是子组件上的 handleClick() 交互方式（调用) 来自同一组件的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}); }

}

Answer 2

我为您的组件提供了setup a JSFiddle，但我仍然完全不知道发生了什么。您的state.progress 似乎是event.target 的id 属性的字符串连接：例如0111。

因此，每次调用scoreUpdate 时，它都会在末尾添加id（在JSFiddle 的情况下为always 1）属性：

• 点击1：state.progress === 0
• 点击2：state.progress === 01
• 点击3：state.progress === 011
• 点击4：state.progress === 0111

只有在第四次点击时this.state.progress.length % 3 == 0 才会产生true，因此会更新state.score。

请解释一下？