Question

我在这里写了一些React JS代码：

import React from "react"

    class App extends React.Component {
        constructor() {
            super();
            this.state = {
                count: 0
            };
            this.handleClick = this.handleClick.bind(this);
        }

        handleClick(prevState){
            this.setState(prevState => {count: prevState.count +1});
        }

        render() {
            return (
                <div>
                    <h1>{this.state.count}</h1>
                    <button onClick={this.handleClick}>Increment</button>
                </div>
            );
        }
    }

这粉碎了整个程序。在这里，箭头功能只有一个语句，因此，即使添加了return关键字，我也删除了方括号和return关键字，但它们也不起作用。

handleClick(prevState){
    this.setState(prevState => return {count: prevState.count +1});
}

发生了什么事？我想念的是什么，谢谢

Answer 1

无需使用prevState，这可以解决您的问题：

class App extends Component {
  state = {
    count: 0
  };

  handleClick = () => {
   this.setState({
       count: this.state.count + 1  
   })
};


  render() {
    const { count } = this.state;
    return (
        <div>
          <h1>{count}</h1>
            <button onClick={() => this.handleClick(this.state.count)}>Increment</button>
                </div>
            );
        }
    }

Answer 2

认为您缺少多余的括号：

pnpx mocha -r ./node_modules/ts-node/register '*.test.ts'

或将主体包裹在括号中。

handleClick(prevState){
    this.setState(prevState => {
          return {count: prevState.count +1}
    });
}

箭头语句使我困惑了一段时间，直到我开始用逐渐简单的语法阅读它们为止。

handleClick(prevState){
    this.setState(prevState => ({count: prevState.count +1}) );
}

Answer 3

这是您的固定代码：

import React from 'react'

class App extends React.Component {
  state = {
    count: 0,
  }

  handleClick = () => this.setState(({ count }) => ({ count: count + 1 }))

  render() {
    const { count } = this.state

    return (
      <div>
        <h1>{count}</h1>
        <button onClick={this.handleClick}>Increment</button>
      </div>
    )
  }
}

错误/错误：

this.setState(prevState => {count: prevState.count +1});

解决方法：

this.setState(prevState => ({ count: prevState.count + 1 }))

箭头功能在反应功能中不起作用

3 个答案: