Question

当我点击按钮时，我想这样做，变量'balance'增长1并显示在'Balance：'字后面。我的代码编译，但即使我单击我的按钮，显示的变量也为0。

import React, { Component } from "react";

export default class App extends Component {
  constructor(props) {
    super(props);
    this.addOne = this.addOne.bind(this);
  }
  addOne() {
    balance++;
  }
  render() {
    var balance = 0;
    var balanceStyle = {
       fontSize: 50,
       color: '#FF0000'
    }
    return (
       <div>
          <h1 style = {balanceStyle}>Balance: {balance}</h1>
          <button onClick={this.addOne}>+1</button>
       </div>
    );
 }
}

Answer 1

有几个原因，首先，您在渲染函数中定义一个变量，并尝试在未定义的addOne函数中递增它。

即使您认为addOne可以使用该余额但在构造函数中定义它，您也可以在组件渲染功能中初始化它，因此每次Component重新渲染它时它仍然为零

在这种情况下，直接查询变量的值也不会重新渲染组件并反映更改。您必须使用forceUpdate()

查看问题的摘要

class App extends React.Component {
  constructor(props) {
    super(props);
    this.addOne = this.addOne.bind(this);
  }
  addOne() {
    balance++;
    console.log(balance)
  }
  render() {
    var balance = 0;
    var balanceStyle = {
       fontSize: 50,
       color: '#FF0000'
    }
    return (
       <div>
          <h1 style = {balanceStyle}>Balance: {balance}</h1>
          <button onClick={this.addOne}>+1</button>
       </div>
    );
 }
}

ReactDOM.render(<App/>, document.getElementById('app'));

<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="app"></app>

现在正确地做到这一点的方法是将平衡作为一种状态，这样每次更新它时，组件都会被重新渲染，并且变化会立即反映出来

class App extends React.Component {
  constructor(props) {
    super(props);
    this.addOne = this.addOne.bind(this);
    this.state = {
        balance: 0
    }
  }
  addOne() {
       this.setState((prevState) => ({balance: prevState.balance + 1}))
  }
  render() {
    var balanceStyle = {
       fontSize: 50,
       color: '#FF0000'
    }
    return (
       <div>
          <h1 style = {balanceStyle}>Balance: {this.state.balance}</h1>
          <button onClick={this.addOne}>+1</button>
       </div>
    );
 }
}

ReactDOM.render(<App/>, document.getElementById('app'));

<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="app"></app>

如果您想知道this.setState((prevState) => ({balance: prevState.balance + 1}))是什么，请阅读 documentation

当你当前的状态取决于你之前的状态或当前的道具时，这是setState的正确方法

Answer 2

每次重新渲染此组件时，您都要创建一个新的平衡变量，该变量的范围是render方法。 addOne方法永远不能访问该值。它实际上是创建一个全局变量，使用undefined值初始化它，然后向其中添加一个。每次单击然后将值加1（始终为NaN）。

要解决此问题，您应该为组件使用state：

import React, { Component } from "react";

export default class App extends Component {
  constructor(props) {
    super(props);
    this.addOne = this.addOne.bind(this);
    this.state.balance = 0;
  }
  addOne() {
    this.setState({balance: this.state.balance + 1});
  }
  render() {
    var balanceStyle = {
       fontSize: 50,
       color: '#FF0000'
    }
    return (
       <div>
          <h1 style = {balanceStyle}>Balance: {this.state.balance}</h1>
          <button onClick={this.addOne}>+1</button>
       </div>
    );
 }
}

代码可能会对您有所帮助：https://facebook.github.io/react/docs/conditional-rendering.html

您也应该阅读javascript中的范围，并考虑使用严格模式。

变量不会添加到React中

2 个答案: