4

我正在尝试增加我的状态变量，但每当我这样做时，就会弹出一个错误，指出变量状态未定义。我在构造函数中定义了我的变量。显然 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]
  }
}
4

4 回答 4

9

你的counter +4点无处。

它应该是this.state.counter + 4

此外，如果您在render()确保它先前已绑定的情况下调用此函数，则可以在构造函数上这样做：

this.displayDiv = this.displayDiv.bind(this);
于 2017-02-07T15:03:49.537 回答
3

我认为它很简单，在函数中试试这个displayDiv 

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

您在这一行忘记了 this.state :)

于 2017-02-07T15:04:29.697 回答
3

添加到其他好的答案：

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

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 文档，您还应该考虑 的异步性质setState()。

React 可以将多个setState()调用批处理到单个更新中以提高性能。

因为this.props和this.state可能会异步更新，所以您不应该依赖它们的值来计算下一个状态。

例如，此代码可能无法更新计数器：

// Wrong
this.setState({
    counter: this.state.counter + this.props.increment,
});

setState()要修复它，请使用接受函数而不是对象的第二种形式。该函数将接收先前的状态作为第一个参数，并将应用更新时的道具作为第二个参数：

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

我们在上面使用了箭头函数，但它也适用于常规函数

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

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

附加说明：由于 的这种异步性质，调用后this.setState()访问仍将返回其旧值。您发布的原始代码随后将立即访问：this.statethis.setState()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);
}
于 2017-02-07T19:27:06.910 回答
1

您可以更换：

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}));

了解如何使用 Object.assign() 方法

于 2017-02-07T15:13:17.750 回答