为什么ReactJs说“警告'计数器:'已定义但从未使用过”但是使用了变量?

时间:2016-11-29 14:47:04

标签: reactjs

这是一个React组件:

 constructor(props) {
     super(props);
     this.state = {
         counter: 0
     };
 }

 handleClick (event) {
     this.setState((prevState, props) => {
         counter: props.counter + 1
     });
     console.log(this.state.counter);
 }

尝试执行此页面时,浏览器会在控制台中显示以下警告行:

/Volumes/Development/react-hello-world/src/App.js
  17:13  warning  Using 'LabeledStatement' is not allowed                                no-restricted-syntax
  17:13  warning  Unexpected labeled statement                                           no-labels
  17:13  warning  'counter:' is defined but never used                                   no-unused-labels
  17:22  warning  Expected an assignment or function call and instead saw an expression  no-unused-expressions

✖ 4 problems (0 errors, 4 warnings)

我在这里使用计数器:“console.log(this.state.counter);”。为什么会出现错误消息?

为什么我改变

 this.setState((prevState, props) => {
     counter: props.counter + 1
 });

 this.setState({
     counter: props.counter + 1
 });

它有效吗?

1 个答案:

答案 0 :(得分:3)

因为

counter: props.counter + 1

表示创建名为counter的{​​{3}}。但是,你确实从未使用过这个标签。

你可能想要

this.setState((prevState, props) => ({
  counter: props.counter + 1
}));

注意,您只需要在带括号的箭头函数中包含{}。否则{}被认为是函数体块,而不是从此函数函数返回的对象,在您的情况下需要它。