Как правильно делать fetch в react?

Question

[Kappy]

Добрый день, с сервера получаю json , обрабатываю его, но вызов render происходит 2 раза.
Гуглил, делают пустой обьект в конструкторе. И если у обьекта нет проперти, то возвращается undefined, но у меня есть и массивы, из за которых падает приложение .
Прикладываю код . Как все же вытащить данные из состояния? Неужели fetch в рендере и писать?

export default class Forma extends React.Component {

    constructor(props) {
        super(props);
        this.state ={data:[]}
    }

    componentWillMount(){

        fetch('http://localhost:3001')
            .then(response => response.json())
            .then(result => this.setState({data: result}))
            .catch(e => console.log(e));
    }



    render() {
        const { data } = this.state;


        return <h1>{console.log(data.goals[0].gs_id)}</h1> //падает 
}


}

Answer 1

[Антон Спирин]

1. data.goals[0].gs_id
Использование подобных, небезопасных конструкций считается плохим тоном.
2. Используйте в state ключ состояния загрузки.

export default class Forma extends React.Component {
    constructor(props) {
        super(props);

        this.state ={ data: {}, isFetching: true, error: null };
    }

    componentDidMount() {
        fetch('http://localhost:3001')
            .then(response => response.json())
            .then(result => this.setState({data: result, isFetching: false }));
            .catch(e => {
              console.log(e);
              this.setState({data: result, isFetching: false, error: e }));
            });
    }

    render() {
        const { data, isFetching, error } = this.state;
        
        if (isFetching) return <div>...Loading</div>;

        if (error) return <div>{`Error: ${e.message}`}</div>;

        return <h1>{data.goals[0].gs_id}</h1>;
    }


}

Comments

[Kappy]

Так вот и суть, я просто написал 0-вой элемент массива, чтоб в консоль выводить. Все равно та же ошибка
Cannot read property '0' of undefined

[Алексей Уколов]

Во-первых, вы в конструкторе создаёте массив, хотя у вас на самом деле объект. Во-вторых, вы этот объект в конструкторе не создаёте, потому и ошибка.

Должно быть как минимум вот так:

constructor(props) {
    super(props);
    this.state ={data: {goals: []}}
}

Но тогда у вас будет падать не на 0, а на gs_id

Ну а как правильно сделать вам в этом ответе уже написали. Разве что стоит его расширить:

render() {
        const { data, isFetching, error } = this.state;
        
        if (isFetching) return <div>...Loading</div>;

        if (error) return <div>{`Error: ${e.message}`}</div>;

        if (!data || !data.goals || !data.goals[0]) return <div>Всё пропало!</div>;

        return <h1>{data.goals[0].gs_id}</h1>;
    }

[Kappy]

Вот что выводит косноль. Если пишу
return <h1>{console.log(data)}</h1>

[Kappy]

Алексей Уколов, да, незаметил массив, исправил , однако я пытаюсь вытащить его из состояния, везде пишут, что fletch запросы не выполняются в конструкторе

[Алексей Уколов]

Вам никто и не предлагает делать их в конструкторе, жизненный цикл у вас правильно описан, вы просто в структуре своих данных запутались.

[Kappy]

Алексей Уколов, действительно, падает теперь при попытке получить свойство

[Алексей Уколов]

Сделайте как написал Антон Спирин и не будет падать...

[Kappy]

Алексей Уколов, сделал, и причем заработало . Но я так понимаю работает , потому что обработка данных идет только после того, как они получены?
То есть порядок таков :
render( return div loading.. )
Component Will mount -> set state
render(data)
По факту как раз дело в том, что рендер был 2 раза?

[davidnum95]

Николай Капитанов, componentWillMount deprecated, используйте componentDidMount

Answer 2

[Борис Черепанов]

Ну или так

import React, { Component } from 'react';

class Succes extends Component{
    constructor(props){
        super(props);
        this.state = { error: null,
            isLoaded: false,
            items: Array
        }
    }



    componentDidMount() {
        // Fetch тут
        fetch("http://example.url/page.php")
            .then((response) => response.json())
            .then((response) => {
                    this.setState({items: response});
                    this.setState({isLoaded: true});
            })
            .then((error) => {
                this.setState({false: true});
                this.setState({error});
            })


    }



    render (){
        const data = Array.from(this.state.data.headers);

    }

}

export default Succes;

Ну подробно можете прочитать тут