react ax ios Состояние сначала не устанавливается

Question

Я пытаюсь получить некоторые данные из api.

class Article extends React.Component {
constructor() {
    super()
    this.state = {
        Articles: []
    }   
}
componentDidMount() {
    axios.get('/api/articles')
    .then(res => {
        this.setState({Articles: res.data})
    })
}
render() {
    return (
        <div className="container-fluid">
           {console.log(this.state.Articles)}
        </div>
    )
  }
}

Моя проблема в том, что когда я пытаюсь получить некоторые данные, я получаю такие ошибки, как Undefined ...

и это поскольку при первом запуске рендеринга значение равно '[]', а после этого значение обновляется.

Как решить эту проблему?

Answer 1

Просто проверьте, пуст ли массив статей, и, соответственно, отобразите содержимое:

class Article extends React.Component {
constructor() {
    super()
    this.state = {
        Articles: []
    }   
}
componentDidMount() {
    axios.get('/api/articles')
    .then(res => {
        this.setState({Articles: res.data})
    })
}
render() {
    return (
        <div className="container-fluid">
           {this.state.articles.length > 0 && console.log(this.state.articles)}
        </div>
    )
  }
}

Приведенные выше фрагменты кода проверяют, имеет ли массив статей длину больше 0, и если да, он выполняется заявление в сочетании. С помощью этого свойства вы можете делать множество вещей, например отображать счетчик загрузки, пока ваш запрос не завершится и вы не сможете фактически отобразить данные.

Answer 2

Установите базовое c демонстрационное значение, которое будет в массиве. Это будет немедленно заменено значениями API. Вы можете использовать что-то вроде , пожалуйста, подождите, получение данных . Если у пользователя стабильное соединение, это демонстрационное значение даже не будет видно