Question

我正在尝试使用js + React，我面临一个意想不到的行为：

在下面的例子中，虽然它在开始时似乎工作正常但我没有按预期在(this.state.progress.length%3==0)进行分数更改。

进度字符串似乎正在更新，但每四次点击更新得分......

编辑： 我应该指出问题的根源，因为ppl很忙，问题是handleClick()上的问题子组件从同一组件中交互（调用）scoreUpdate()。但是我不认为解决方案是微不足道的，因为问题末尾的consol.log（）示例有效。

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

我应该使用承诺来调用我的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')
);

任何有效的见解/解释为什么这种hapening将受到高度赞赏。令我困惑的是，当我输入控制台时：

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的{{1}}属性的字符串连接：id。

因此，每次调用0111时，都会将scoreUpdate（在JSFiddle的情况下始终 id）属性添加到端：

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

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

请澄清？

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

2 个答案: