this.setState 使变量未定义？

Question

我正在尝试增加我的状态变量，但每当我这样做时都会弹出一个错误，提示变量状态未定义。 我在构造函数中定义了我的变量。显然 setState 函数中发生了一些事情。

这是呈现错误的代码：

displayDiv(){
  var arr=[];
  if (this.state.flag[2]){
    this.setState({counter:counter+4}); // error:undefined
    for (let i = this.state.counter-4; i < this.state.counter; i++)
      arr.push(this.state.arrayHeader[0].content);
    }
  }
 return(
   arr.map(function(item,i){
     return (
       <div className="bodydiv col-sm-3">
         <Header/>
         <Content/>
         <Tags/>
       </div>
     );

    })
  );
}

这里是构造函数中定义的变量：

constructor(props){
  super(props);

  this.state = {
    arrayHeader:[],
    arraytag1:[],
    arraytag2:[],
    counter:0,
    flag:[false,false,false]
  }
}

Answer 1

你的 counter +4 指向任何地方。

应该是this.state.counter + 4

此外，如果您在 render() 上调用此函数，请确保它之前已绑定，您可以在构造函数上这样做：

this.displayDiv = this.displayDiv.bind(this);

Answer 2

我觉得很简单，在函数中试试这个 displayDiv

this.setState({counter: this.state.counter+4});

你忘记了这一行的 this.state :)

Answer 3

您可以替换：

this.setState({counter:counter+4}); // error:undefined

与：

const { counter } = this.state; // getting the counter from state
this.setState({counter:counter+4});

但希望您真的想要清除状态的所有其他属性。否则你应该这样做：

const { counter } = this.state;
this.setState(Object.assign({},this.state,{counter: counter + 4}));

见how to use Object.assign() method

Answer 4

补充其他好的答案：

简而言之，您可能希望这样的事情是安全的：

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

是的，您当前的问题是由于此语句中未定义的局部变量 counter:

this.setState({ counter: counter+4 });

一个简单的解决方案（正如其他答案已经指出的那样）是引用各自的状态变量：

this.setState({ counter: this.state.counter+4});

正如 cdaiga 所指出的，您可能希望保留状态的其他属性，因为 setState() 正在用提供给它的参数替换当前状态，并且您会有效松开它上面的所有其他值。你可以这样做：

this.setState({ ...this.state, counter: this.state.counter+4 });

根据 React Documentation，您还应该考虑 setState() 的异步性质。

React may batch multiple setState() calls into a single update for performance.

Because this.props and this.state may be updated asynchronously, you should not rely on their values for calculating the next state.

For example, this code may fail to update the counter:
// Wrong
this.setState({
    counter: this.state.counter + this.props.increment,
});
To fix it, use a second form of setState() that accepts a function rather than an object. That function will receive the previous state as the first argument, and the props at the time the update is applied as the second argument:
// Correct
this.setState((prevState, props) => ({
    counter: prevState.counter + props.increment
}));
We used an arrow function above, but it also works with regular functions

在您的具体示例中，我们最终会得到这样的结果（如顶部所述）：

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

附加注意事项：由于 this.setState() 的这种异步性质，在调用 this.setState() 之后访问 this.state 仍将 return 其旧值。您的原始发布代码随后立即访问 this.state.counter：

this.setState({counter:counter+4}); // error:undefined
for (let i = this.state.counter-4; i < this.state.counter; i++)
    arr.push(this.state.arrayHeader[0].content);
}

幸运的是，在这种情况下，您没有在循环中使用变量 i，并且 this.state.arrayheader[0].content 没有被更新，即以下内容是等价的：

this.setState((prevState) => ({
    ...prevState, counter: prevState.counter+4
}));
for (let i = 0; i < 4; i++) {
     arr.push(this.state.arrayHeader[0].content);
}

this.setState 使变量未定义？

this.setState makes variable undefined?

javascript

setstate

reactjs