• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

odczytanie wartości z tablicy w ktorej są tablice - problem z pętlą

Object Storage Arubacloud
0 głosów
364 wizyt
pytanie zadane 4 maja 2020 w JavaScript przez robertos18 Obywatel (1,120 p.)

Mapa wyświetla trasy składające się ze znaczników. Używam mapboxa. Mam 4 inputy, do których dodaje {Name, Description, X, Y}. Jeśli tablica history ma tablicę dłuższą niż 4/5, występuje błąd TypeError error: Cannot read property 'X' of undefined. Myślę, że robię błąd pętli. Proszę o pomoc

```
state= {
history: [],
elements:[],
currentHistoryIndex:0
}
handleOnHistoryPush = () => {
    this.setState({ history: ([...this.state.history, this.state.elements]) });
    this.setState({ elements: ([]) });
  };
 
  appendElement = (Name, Description, X, Y) => this.setState({ elements: ([...this.state.elements, { Name, Description, X, Y }]) });

handleSelect = (event) => {
    const map = new mapboxgl.Map({
      container: this.mapContainer,
      style: 'mapbox://styles/mapbox/streets-v11',
      center: [-77.04, 38.907],
      zoom: 11.15
    })

    const loop = () => {
      for (var i = 0; i < this.state.history[this.state.currentHistoryIndex].length; i++) {
        var obj = this.state.history[i][i];
        let myLatlng = new mapboxgl.LngLat(obj.X, obj.Y);
        new mapboxgl.Marker()
          .setLngLat(myLatlng)
          .setPopup(new mapboxgl.Popup({ offset: 25 })
            .setHTML('<h3>' + obj.Name + '</h3><p>' + obj.Description + '</p>'
            ))
          .addTo(map);
      }
    }
    this.setState({ currentHistoryIndex: event.currentTarget.value }, loop)
  }

render(){
return(
<>
<div ref={el => this.mapContainer = el}></div>
<div style={{ display: 'flex', flexDirection: 'row' }}>
          <div>
            Posts<br />
            <button className="btn" onClick={() => this.appendElement(this.state.Name, this.state.Description, this.state.Y, this.state.X)}>Add</button>
            <button className="btn" onClick={this.handleOnHistoryPush}>Save</button>
            <ul>
              {this.state.elements.map(element => (

                <li key={element.Name}>{`Name: ${element.Name}`}</li>

              ))}
            </ul>
          </div>
          <div>
            History<br />
            <select onChange={this.handleSelect}>
              {
                this.state.history.map((_, index) => <option key={index} value={index}>Route: ${index}`}</option>)
              }
            </select>
            {this.state.history[this.state.currentHistoryIndex] && (
              <ul>
                {this.state.history[this.state.currentHistoryIndex].map(historyRecord => <li key={historyRecord.Name}>Name ${historyRecord.Name}`}</li>)}
              </ul>
            )}
          </div>
        </div>
</>
)
}
```

 

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

Podobne pytania

0 głosów
1 odpowiedź 203 wizyt
pytanie zadane 3 maja 2020 w JavaScript przez robertos18 Obywatel (1,120 p.)
0 głosów
4 odpowiedzi 473 wizyt
pytanie zadane 3 sierpnia 2019 w C i C++ przez wik90210 Nowicjusz (120 p.)
0 głosów
0 odpowiedzi 90 wizyt

92,687 zapytań

141,599 odpowiedzi

320,089 komentarzy

62,048 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...