我正在尝试增加我的状态变量,但每当我这样做时会弹出一个错误,表示变量状态是未定义的。 我在构造函数中定义了我的变量。显然,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]
}
}
答案 0 :(得分:7)
你的mapView.selectedMarker=locationMarker
点无处可寻。
应为counter +4
此外,如果您在this.state.counter + 4
上调用此函数,请确保它之前已被绑定,您可以在构造函数上执行此操作:
render()
答案 1 :(得分:3)
我认为很简单,请在函数displayDiv
this.setState({counter: this.state.counter+4});
你在这一行忘了this.state:)
答案 2 :(得分:2)
添加其他好的答案:
简而言之,您可能希望这样的安全:
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可以将多个
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.state
后访问this.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);
}
答案 3 :(得分: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}));