地图功能中的ReactJS setState答案

【问题标题】：ReactJS setState in map function地图功能中的ReactJS setState
【发布时间】：2020-04-14 23:52:30
【问题描述】：

我有一个 map() 函数，它循环存储在我的班级状态中的 json 数据。在每个循环中，它都会显示一个设置了 onClick 鼠标事件的组件。它不起作用并输出错误“错误：超出最大更新深度...”我该怎么做才能使其正常工作？

这是我使用的代码示例：

我的类的构造函数：

constructor(props) {
   super(props);
   this.state = {
     storeList:  storesLoc.stores,
     currentStoreName: storesLoc.stores[0].name,
     currentStoreCp:  storesLoc.stores[0].cp,
     currentStoreAddress:  storesLoc.stores[0].address
}

以及渲染方法中的代码示例

<ul className="ul-locations">
{this.state.storeList.map((store, i) => (
 <li>
    <StoreItem  
     key={i} 
     cp={store.cp} 
     name={store.name} 
     selected={store.selected} 
     onClick={this.changeCityInfo(i)}/>
  </li>
  ))}
  <li>
     <Shuffle className="col-2"></Shuffle>
     <a href="#" className="ml-2 mr-2 col-10">Changer de Magasin</a></li>

【问题讨论】：

完整代码会有所帮助
您在渲染时调用了事件处理程序 - onClick={this.changeCityInfo(i)}。将箭头函数onClick={() => this.changeCityInfo(i)}, or better yet pass the handler, and i`改为StoreItem，在里面处理。

标签： javascript reactjs

【解决方案1】：

您应该将函数引用传递给 onclick，但您执行它，并且在其中您可能调用了一些 setState，因此是无限循环；用箭头函数包装它，返回你想要的函数，你很高兴

onClick={()=>this.changeCityInfo(i)}/>

【讨论】：

【解决方案2】：

这会在每次渲染时调用带有参数i 的changeCityInfo 函数。

onClick={this.changeCityInfo(i)} // Wrong expression, invokes the function

相反，传递一个带有空参数列表的箭头函数并在该函数内部调用：

onClick={() => this.changeCityInfo(i)} // Correct expression, doesn't invoke but point

现在它只会在点击时被调用。

【讨论】：

它将一个事件对象传递给changeCityInfo函数而不是i

【解决方案3】：

您传递给 StoreItem 的 onClick 道具似乎有问题 - 试试这个：

<StoreItem 
    {...otherprops}
    onClick={() => this.changeCityInfo(i)}
/>

【讨论】：

这可能需要澄清一下，他们正在调用函数而不是将其传递给点击事件。
谢谢大家。它会帮助我理解

【解决方案4】：

解释：您收到错误是因为函数 changeCityInfo 被映射函数的每次迭代调用

解决方案： 每当我们必须处理事件或将函数传递给另一个组件时，我们必须按照以下方式进行操作<button onClick={() => this.handleClick(arg)}>，因此在您的情况下请遵循以下操作：

  <StoreItem  
   key={i} 
   cp={store.cp} 
   name={store.name} 
   selected={store.selected} 
   onClick={() => this.changeCityInfo(i)}
 />

看看官方 react 网站上的 this 和 this 文档，你会更好地理解它

【讨论】：

【解决方案5】：

如果你使用参数，你可以在 onClick 道具上使用类似的东西

 <li>
    <StoreItem  
     key={i} 
     cp={store.cp} 
     name={store.name} 
     selected={store.selected} 
     onClick={() => this.changeCityInfo(i)}/> // try this
  </li>

【讨论】：