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

Question

[newhacke]

Обьясните пожаулйста, только начинаю учить реакт, в чем прикол, почему стэте не меняется?? и как правильно получать данные с сервера, как их закинуть в переменную, если я хочу эти данные вставлять в разметку??? Как правильно делать? И как быть если я не хочу использовать классовую компоненту, как получить ответ в 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;

Comments

[0xD34F]

начинаю учить реакт

начните лучше учить js

[newhacke]

0xD34F, Самый тупой ответ который я вообще видешь на хабре))) Ты всем так пишешь? какой ты видишь смысл в этом сайте, если все вопросы по одной причине того, что у кого не хвататет знаний, у кого то их больше, и те у кого их больше помогают тем у кого их меньше. Но есть еще одна каста, вроде тебя, которые просто пишут бесполезные ответы

Answer 1

[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;

Comments

[newhacke]

ответ приходит, стейт не меняется. Если в componentDidMount там же в конце then прописать console log this.state то все лежит там. но как только мы выходим за пределы этого метода то this.stat.info по прежнему null

[newhacke]

И да, там ломается, потому что стэте равен нулю, а не тому что пришло в ответе))

[hzzzzl]

newhacke, первый рендер вызывается до componentDidMount, попробуй в рендере написать

render() {
        if(!this.state.info) return null

        return (
            <div className="wrap">
                <h1>{this.state.info.id}</h1> 
            </div>
       )
  }

[newhacke]

hzzzzl, Блин, кажется мы о разном говорим. Мне надо из полученного ответа, взять какой то элемент и отобразить его в рендере, как мне это сделать???

[hzzzzl]

newhacke, я вощем то не понимаю, что именно не получается :)
см код JS

[newhacke]

hzzzzl, охх дружище напиши мне в телеграм пожалуйста очень прошу )))

telegram @fuckso

Answer 2

[Abr_ya]

начинаю учить реакт

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

Comments

[newhacke]

спасибо большое, но там та же фигня)) Я поэтому тупо и вынес это в отдельную функцию что бы просто понять как это делается))