@newhacke

Как использовать полученные данные с сервера React axios?

Обьясните пожаулйста, только начинаю учить реакт, в чем прикол, почему стэте не меняется?? и как правильно получать данные с сервера, как их закинуть в переменную, если я хочу эти данные вставлять в разметку??? Как правильно делать? И как быть если я не хочу использовать классовую компоненту, как получить ответ в const name = () => { } и передать его в другую компоненту? Спасибо огромное заранее)) Вообще голова кругом, пытаюсь разобраться помогайте))

class App extends Component{
    constructor(props) {
        super(props);
        this.state = {
            info: null
        }
    }
    componentDidMount() {
        axios.get('https://reqres.in/api/users/2').then(r => {
            const resp = r.data;
            this.setState({info: resp })
        })
    }
    render() {
        return (
            <div className="wrap">
                <h1>{this.state.info.id}</h1>
            </div>
        )
    }
}

export default App;
  • Вопрос задан
  • 100 просмотров
Пригласить эксперта
Ответы на вопрос 2
hzzzzl
@hzzzzl
ну а сам стейт-то меняется, ответ приходит?

class App extends Component{
    constructor(props) {
        super(props);
        this.state = {
            info: null
        }
    }
    componentDidMount() {
        axios.get('https://reqres.in/api/users/2').then(r => {
            const resp = r.data;
            console.log(resp) // ??????
            this.setState({info: resp })
        })
    }
    render() {
        console.log(this.state.info) // ??????
        return (
            <div className="wrap">
                <h1>{this.state.info.id}</h1>   // здесь вообще не ломается, когда info: null?
            </div>
        )
    }
}

export default App;
Ответ написан
Abr_ya
@Abr_ya
начинаю учить реакт

Я бы обратил внимание на три вещи:
- функциональные компоненты сейчас выглядят поинтереснее и актуальнее классов, что ли,
- писать асинхронную логику (получение данных с удаленного сервера) прямо в компоненте несколько странно - возможно пришло время задуматься и посмотреть какие-то практики организации архитектуры приложений,
- полученные с сервера данные можно хранить не только в стейте компонента, но и использовать менеджеры состояний (Redux, Mobx, etc) - возможно как раз подходящий момент начать работать с ними.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы