Как установить данные в state при первом рендере?

256

24 февраля 2017, 02:44

Есть компонент, в при загрузке страницы в его методе componentDidMount я делаю get-запрос на сервер:

componentDidMount: function () {
        $.ajax({
            type: 'GET',
            url: '/adress',
            data: data_storage,
            success: function (data_storage) {
                this.setState({data_storage: data_storage});
            }.bind(this),
            beforeSend: function () {
                this.setState({loading: true});
            }.bind(this)
        });
 },

Данные принимаю и устанавливаю их в state сразу. Далее они мне понадобятся для формирования компонента(это происходит с помощью методов на ходу и зависит от полученных данных). Вот тут и проблема, что при первом рендере data_storage является undefined и метод, который работает с этим параметром отваливается.НО если я уберу метод, то в консоль логе вижу,что компонент рендерится несколько раз-первый без data_storage, а второй с ним. В чем моя ошибка? Как мне это дело прописать так, чтобы он при первом рендере уже имел информацию и не ругался?

Answer 1

Добавил краткий пример работающего кода с ожиданием данных.

class Application extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
      myData: undefined
    }
  }
  componentDidMount () {
    setTimeout(function () {
      this.setState({
        myData: {
          param1: 'param1',
          param2: 'param2',
          param3: 'param3',
        }
      })
    }.bind(this), 4000);
  }
  render () {
    if (!this.state.myData) {
      return <div>NO DATA</div>
    }
    return <div>
      Test application
    </div>
  }
}
ReactDOM.render(<Application />, window.root)

Проверить работу можно тут

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

javascript vk api

Есть код:

426

javascript

активна категорія товару [требует правки]

як зробити активною категорію коли ми зайшли в товар даної категорії

256

javascript

Группировка значений в массив по ключам javascript

Есть массив: [{ continent: 'Europa', country: 'Russia', region: 'Moskovska obl' }, { continent: 'Europa', country: 'Russia', region: 'Tumenskaya obl' }, { continent: 'North America', country: 'USA', region:...

306

javascript

BD Chrome Extensions

Какую базу данных лучше всего использовать для chrome extensions и возможно ли вообще это? Я хочу сделать базу данных слов и выбирать потом их по части...

256