Question

我正在学习React并且遇到了一个简单的挑战：点击一个按钮时计数器增加。

问题是我的组件似乎将数字视为字符串并将它们连接起来，而不是递增它们。例如，如果我的起始编号是2，我点击“添加1＆＃39;我得到了21＆＃39;而不是预期的结果，＆＃39; 3＆＃39;。

我试图用谷歌的方式将它们标记为整数，但没有运气。

我的代码是：

 var CountComponent = React.createClass({

    resetCount: function() {  
        this.setState({  
            count: '0'
        })
    },

    addOne: function() { 
        this.setState({
            count: this.state.count + 1
        })
    },

    getInitialState: function() { 
        return {
            count: '0'
        }
    },

    render: function() {
        return (
            <div>
                <h1>Count {this.state.count}</h1>
                <button onClick={this.addOne}>Add 1</button>
                <button onClick={this.resetCount}>Reset</button>
            </div>
        )
    }
});

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

有人知道我在哪里出错吗？

奇怪的是，我确实找到了一个非常相似的例子，但似乎有效https://codepen.io/ajcbrown820/pen/eZdWaj。我无法看到与我的不同之处。

Answer 1

您应该使用数字而不是字符串！

在数字中添加字符串会导致连接它们，但是相互添加数字会导致数字递增

  getInitialState: function() { 
      return {
          count: 0
      }
  },
  resetCount: function() {  
      this.setState({  
          count: 0
      })
  },

你也可以这样做，但在这个例子中它不是更好的解决方案：

   addOne: function() { 
        this.setState({
            count: +this.state.count + 1
        })
    },

this.state.count之前的+会在将数字加1之前将其变为数字。

Answer 2

因为最初您将count 的值定义为字符串而不是整数。将+与字符串一起使用时，它将连接值。

使用此：

getInitialState: function() { 
    return {
        count: 0
    }
},

resetCount: function() {  
    this.setState({  
        count: 0
    })
},

检查此代码段：

＆＃13;

let count = '0';

count = count + 1;

console.log('count = ', count);

＆＃13;

Answer 3

你的号码确实是一个字符串！

尝试在示例中将from: QVector3D(0, 0, 1) to : QVector3D(1, 0, 1) rot. (Quat.): QQuaternion(scalar:0.92388, vector:(0, 0.382683, 0)) rot. axis: QVector3D(0, 1, 0) rog. ang.: 45替换为'0'，然后再拍一次：）

Answer 4

您的计数状态被视为字符串，因为它是。尝试将您的州设置为0而不是＆＃39; 0＆＃39;。

Answer 5

您已在getInitialState和resetCount 成员中将count计为字符串。其余的Javascript +运算符（即字符串连接）尝试在上述函数中将count初始化为count：0（不带）;）

Answer 6

试试这个，删除单引号为0.引号将其视为字符串，而不是整数。

resetCount: function() {  
    this.setState({  
        count: 0
    })
},

addOne: function() { 
    this.setState({
        count: this.state.count + 1
    })
},

getInitialState: function() { 
    return {
        count: 0
    }
},

Answer 7

您正在尝试向字符串添加数字。所以这个数字也将被视为字符串。

dist

应该是

count: '0'

然后它会正常工作。

Answer 8

请尝试以下更正后的代码。

var CountComponent = React.createClass({

    resetCount: function() {  
        this.setState({  
            count: 0
        })
    },

    addOne: function() { 
        this.setState({
            count: this.state.count + 1
        })
    },

    getInitialState: function() { 
        return {
            count: 0
        }
    },

    render: function() {
        return (
            <div>
                <h1>Count {this.state.count}</h1>
                <button onClick={this.addOne}>Add 1</button>
                <button onClick={this.resetCount}>Reset</button>
            </div>
        )
    }
});

React.render(
    <CountComponent />,
    document.getElementById('app') 
);

如何在React中增加状态？

8 个答案: