Moje założenie polega na tym, że staram się uzyskać dostęp do stanu z zamknięcia. To w jakiś sposób nie działa:

Obecny kod:

export class CityChoice extends React.Component{
constructor(props) {
    super(props);
    this.state={}
}

componentDidMount(){
  request
    .get('http://XXX.XXX.XX.XX:3000/get_courses')
    .set('Accept', 'application/json')
    .then((res) => {
        for (let key in res.body){
          console.log(res.body[key].city)
        }
      this.setState({courses: res.body})
        console.log("this.state.courses -> " + this.state.courses)
    })
    .catch(function(err) {
      console.log(err)
    });
}

render(){
  var that = this
  return (<div>
            <h2>Wähle Deine Stadt</h2>
            {
            that.state.courses.body.city.map((city, index) => (
              <p><Link to={{pathname: "/kurse", stadt: {city}}}><Button>{city}</Button></Link></p>
            ))}
            }
          </div>
        )
    }
}

Oczekiwany wynik

Wyjście przycisków X nazwanych i połączonych z odpowiednimi miastami.

Rzeczywisty wynik

TypeError: that.state.courses jest niezdefiniowany

0
Marc 3 czerwiec 2018, 22:25

3 odpowiedzi

Najlepsza odpowiedź

Twój komponent próbuje renderować courses przed wykończeniem Asyync Fetch. Użyj więc warunkowego renderowania, jeśli nie możesz zainicjować kursów do odpowiedniego stanu NULL, jak sugeruje @tarik Sahni.

{
    !this.state.courses
    ? ""
    : this.state.courses.body.city.map((city, index) => (
        <p><Link to={{pathname: "/kurse", stadt: {city}}}><Button>{city}</Button></Link></p>
    ))}
}

Lub może bardziej zwięzły

{
    this.state.courses && this.state.courses.body.city.map((city, index) => (
        <p><Link to={{pathname: "/kurse", stadt: {city}}}><Button>{city}</Button></Link></p>
    ))}
}

Nie musisz przypisać this do that w funkcji renderowania

2
devserkan 3 czerwiec 2018, 19:43

Kursy są pobierane z serwera, więc odpowiedź przyjdzie po przetworzeniu żądania. Ale w pierwszej funkcji renderowania nie ma właściwości stanu o nazwie courses. Możesz więc ustawić je jako puste w konstruktorze.

constructor(props) {
 super(props);
 this.state={courses : {`what so ever is the data type`}}
}

I podczas renderowania Sprawdź, czy this.state.courses nie jest pusty.

3
Tarik Sahni 3 czerwiec 2018, 19:32

Jestem trochę zdezorientowany na kształt danych. Loop przez res.body, uzyskując dostęp do jego wartości i drukuje wartość z kluczowym miastem z każdego z nich w tym kodzie:

    for (let key in res.body){
      console.log(res.body[key].city)
    }

Następnie przypisujesz res.body do klawisza courses w this.state Oznacza to nieco kształt państwa:

this.state = {
  courses: [
         { city: "New York"},
         { city: "San Francisco"},
         { city: "Jerusalem"},
         { city: "Ho Chi Minh"}
        ]
}

(courses może być przedmiotem też, ale tablica zrobiła mi więcej sensu) Jednak po uzyskaniu dostępu do stanu piszesz następującą ekspresję: that.state.courses.body.city.map. Oznacza to, że państwo bliżej:

this.state = {
  courses: {
    body: {
      city: [
          "New York",
          "San Francisco",
          "Jerusalem",
          "Ho Chi Minh"
      ] 
    }
  }
}

Teraz, ponieważ jest to javascript, może to być, że masz zarówno w kształtach stanu w tym samym obiekcie. Ale szczerze mówiąc, który wydaje się mało prawdopodobny, a jeśli tak, że źle zalecany. Moją sugestią jest uproszczenie kształtu państwa, tak aby niezdefiniowane błędy były odizolowane na określone części, których brakuje. A jeśli musi to być stan skomplikowany, napisz format.

1
Nicholas Yang 3 czerwiec 2018, 19:50