时间戳

首页 > 解决方案 > 无法在渲染中调用的方法内设置状态

javascript - 无法在渲染中调用的方法内设置状态

问题描述

我知道这个问题有很多答案，但我觉得没有一个是我想要的。我的问题是我有这个应用程序可以获取所需半径内的商店列表。当我单击提交时，我会用这些商店信息填充一个数组。我想要做的是能够以我的反应状态将其中一些信息存储到一个数组中。我的主要问题是我想在填充该信息时设置状态，但这会导致无限循环，因为 setState 再次调用渲染方法。希望这可以更好地解释我的问题，下面也有一些代码可以解决。任何帮助表示赞赏，谢谢！

商店.js

Class stores extends React.Component{
 constructor(props){
  this.state = {
   StoreInfo: [],
   Zip: "",
   Radius: ""
  }
}

RenderTable(zip, radius){

.... some stuff to generate stores within this location

storeInfo = []

for(var i = 0; i < storeArray.length; i++){
  storeInfo.push(storeArray.info);
}

this.setState({StoreInfo: storeInfo});


... generate html to be rendered


}


render(){

var renderPage = (

<div>
 {this.RenderTable(this.state.Zip, this.state.Radius)}
</div>

);

return renderPage;

}

这显然只是我的代码所做的一个示例，并且不是确切的文件，因为原始文件有数千行长。

标签： javascriptnode.jsreactjs

解决方案

不要在渲染（）上这样做。相反，您可以使用类中的钩子 componentDidMount() 来完成，如下所示：

componentDidMount() {
if(this.state.StoreInfo.length === 0) {
//set your state here
}
}

在你的 if 语句中，你可以验证一些数据的长度以防止它进入渲染循环，不需要是你的状态中一些信息数组的长度，而是标记你已经加载的代码的东西上信息。您还可以为此创建一个布尔值，并在加载数据时将其设置为 true（或 false）。

推荐阅读