React ограничивает количество вложенных обновлений для предотвращения бесконечных циклов

Question

Я использую реакцию js, чтобы показать местоположения на карте. и получить координаты из файла json. Я установил кнопку для выбора каждого. Затем, когда координаты выбраны, я должен выполнить повторное отображение, чтобы отобразить новую информацию, которую я только что получил. но у меня ошибка говорит: Ошибка: максимальная глубина обновления превышена. Это может произойти, когда компонент повторно вызывает setState внутри componentWillUpdate или componentDidUpdate. 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;

Answer 1

У каждого из них есть проблема: this.state.greenIcon.lat = User3966.coords[0].lat;

В ответ вы не изменяете объект состояния напрямую. Вам нужно вызвать функцию this.setState. Когда вы это сделаете, состояние изменится, а компонент обновится и снова отобразится. Установка состояния так, как вы это делаете, неверна, и React не будет знать, как перерисовать ваши компоненты на основе ваших изменений состояния.

Следуйте советам keikai и потратьте некоторое время на документацию React. Здесь - это раздел setState