React 限制嵌套更新的数量以防止无限循环答案

【问题标题】：React limits the number of nested updates to prevent infinite loopsReact 限制嵌套更新的数量以防止无限循环
【发布时间】：2020-05-20 01:12:41
【问题描述】：

我正在使用 react js 在地图上显示位置。并从 json 文件中获取坐标。 I set up a button to select each.then when the coords are selected I have to rerender to display new info I've just got.但我有一个错误说：错误：超过最大更新深度。当组件在 componentWillUpdate 或 componentDidUpdate 中重复调用 setState 时，可能会发生这种情况。 React 限制嵌套更新的数量以防止无限循环

  const data = UserParents.all.children;

class App extends Component{


 state = {
greenIcon : {
  lat: 51.505,
  lng: -0.09,
},
zoom: 13,

   }
greenIcon = L.icon({
iconUrl : leafGreen ,
shadowUrl : leafShadow ,
iconSize:     [38, 95],
shadowSize:   [50, 64],
iconAnchor:   [22, 94],
shadowAnchor: [4, 62],
popupAnchor:  [-3, -76]
 });
      handleClick (userId) {

    if (userId == 3966){
        this.state.greenIcon.lat = User3966.coords[0].lat;
        this.state.greenIcon.lng = User3966.coords[0].lng;
    }else if (userId == 3967) {
        this.state.greenIcon.lat = User3967.coords[0].lat;
        this.state.greenIcon.lng = User3967.coords[0].lng;
    }else if (userId == 3968) {
        this.state.greenIcon.lat = User3968.coords[0].lat;
        this.state.greenIcon.lng = User3968.coords[0].lng;
    }else if (userId == 3969) {
        this.state.greenIcon.lat = User3969.coords[0].lat;
        this.state.greenIcon.lng = User3969.coords[0].lng;
    }else if (userId == 3970) {
        this.state.greenIcon.lat = User3970.coords[0].lat;
        this.state.greenIcon.lng = User3970.coords[0].lng;
    }

    this.forceUpdate();
}


  render() {

const positionGreenIcon = [this.state.greenIcon.lat, this.state.greenIcon.lng]
return (
    <div className="App">
         <div>
            {
                Object.keys(data).map((key)=>(
                    <div>
                        <h4>{data[key].name}</h4>
                        <h4>{key}</h4>
                        <button onClick={this.handleClick()}>Select</button>
                        <br/>
                        <br/>
                        <br/>
                    </div>
                ))
            }
         </div>
      <Map className='map' center={positionGreenIcon} zoom={this.state.zoom} >
        <TileLayer
            attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        <Marker position={positionGreenIcon} icon={this.greenIcon}>
          <Popup>
            A pretty CSS3 popup. <br /> Easily customizable.
          </Popup>
        </Marker>
      </Map>
    </div>
);
 }
}
    export default App;

【问题讨论】：

删除this.forceUpdate()
但是如何重新渲染？
首先，请仔细阅读官方文档的基本概念，您对props和state的更改会导致自动重新渲染。而且，你永远不能通过直接给它赋值来设置state，而是使用this.setState({ XXX: value })。

标签： reactjs leaflet rerender

【解决方案1】：

这种情况下的错误是onClick事件必须通过回调来调用，如果没有，则每次渲染都会不断地实例化该函数，所以在这种情况下

onClick={()=>this.handleClick()}

当然，还要阅读 React 网站的基本文档，因为你的代码充满了错误。

【讨论】：

【解决方案2】：

每个人都有问题：this.state.greenIcon.lat = User3966.coords[0].lat;

在反应中，您不会直接更改状态对象。您需要调用this.setState 函数。当您这样做时，状态会发生变化，并且组件会更新和重新呈现。以你的方式设置状态是不正确的，React 不会知道根据你的状态变化重新渲染你的组件。

遵循 keikai 的建议并花一些时间阅读 React 文档。 Here 是setState 上的部分

【讨论】：

【解决方案3】：

尝试通过onClick = {this.handleClick} 或onClick= {()=> this.handleClick()} 替代onClick={this.handleClick()}

【讨论】：