Как получить доступ к состоянию из замыкания в React - PullRequest
0 голосов
/ 03 июня 2018

Я предполагаю, что я пытаюсь получить доступ к состоянию из замыкания.Это почему-то не работает:

Текущий код:

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>
        )
    }
}

Ожидаемый результат

Вывод x названных кнопок исвязан с соответствующими городами.

Фактический результат

Ошибка типа: that.state.courses не определено

Ответы [ 3 ]

0 голосов
/ 03 июня 2018

Ваш компонент пытается отобразить courses до завершения асинхронной выборки.Поэтому используйте условный рендеринг, если вы не можете инициализировать свои курсы в соответствующем нулевом состоянии, как предложил @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>
    ))}
}

или, возможно, более краткий

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

Вы нев функции рендеринга this нужно присвоить *1008* that

0 голосов
/ 03 июня 2018

Я немного запутался в форме ваших данных.Вы перебираете res.body, обращаетесь к его значениям и распечатываете значение с ключевым городом из каждого из них в этом коде:

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

Затем вы присваиваете res.body клавише courses в * 1007.* Это подразумевает форму состояния, наподобие:

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

(courses тоже может быть объектом, но для массива это имело больший смысл) Однако, когда вы получаете доступ к состоянию, вы пишете следующее выражение:that.state.courses.body.city.map.Это подразумевает, что состояние выглядит ближе к:

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

Теперь, поскольку это JavaScript, возможно, вы оба в форме состояния в одном и том же объекте.Но, откровенно говоря, это кажется маловероятным и, если да, опрометчивым.Мое предложение состоит в том, чтобы упростить форму состояния, чтобы неопределенные ошибки могли быть изолированы для определенных частей вашего состояния, которые отсутствуют.И если это должно быть сложное состояние, выпишите формат.

0 голосов
/ 03 июня 2018

курсов выбираются с сервера, поэтому ответ будет получен после обработки запроса.Но в начальной функции рендеринга нет свойства состояния с именем courses.Таким образом, вы можете установить их как пустые в конструкторе.

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

И во время рендеринга проверьте, не является ли this.state.courses не пустым.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...