Как передать состояние после полной подгрузки?

Question

[Orbb]

Подскажите, у меня компонент получает данные вот таким образом

getCompaniesData() {
        axios.post('http://localhost:11117/GetCompanies', {
            "Token": sessionStorage.getItem('token'),
        })
            .then(response => {
                const companies = response.data.Companies;
                this.setState({companies: companies, message: response.data.TechAudit.Message});
                return companies
            })
            .then(companies => {
                companies.forEach((item, i, arr) => {
                    const devices = [];
                    axios.post('http://localhost:11117/GetDeviceLog', {
                        "Token": sessionStorage.getItem('token'),
                        "Filter": {
                            "CompanyId": item.CompanyId
                        }

                    })
                        .then(response => {
                            devices.push(response.data.Devices);
                            return devices;
                        })
                        .then(devices => {
                            this.setState({devices: devices})
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                });
            })
            .catch(function (error) {
                console.log(error);
            });
    }

Сначала я подгружаю компании, потом по каждой достаю девайсы.

Далее это отрисовывает компонент

return <PrintDevicesTable devices={this.state.devices}/>;

В итоге, в компонент PrintDevicesTable пропсы приходят в таком виде

[
   0: [ 
        0:object
        1:object
        n+1:object
    ]
]

const PrintDevicesTable = (props) => {

    let devices = props.devices[0];
    alert(devices);
    const items = devices.map((item, index) => <li key={index}>{item.ModelAlias}</li>);
    return (<ul>{items}</ul>);
};

devices в этом элементе undefined. Так как родительский компонент перерисовывается 3 раза, то свойства в этот элемент приходят на последней перерисовке. И ествественно на первый раз там ничего нет и я получаю ошибку. Как это фиксить? Как этого избежать? Как не допустить? И как мне теперь отрисовать devices[0]?

п.с. не жс программист

Answer 1

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

Не ясно зачем передавать в props.devices массив массивов, если используется только первый элемент.
Тем не менее решить проблему можно так:

const PrintDevicesTable = props => {
    const devices = props.devices && props.devices[0];
    
    if (!devices || props.isFetching) {
      return <Preloader />;
    } else if (devices && !devices.length && !props.isFetching) {
       return <NoDataPlaceholder />;
    }

    const items = devices.map((item, index) => <li key={index}>{item.ModelAlias}</li>);

    return <ul>{items}</ul>;
};

Comments

[Orbb]

все верно, передается весь и использоваться будет весь. Просто я дебажил и хотел поймать 1 массив, и столкнулся с этой штукой. Мне было непонятно такое поведение.

Я так понимаю, в дальнейшем при нескольких отрисовках и асинхронных запросах данных мне нужно будет всегда делать проверку на их существование?

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

Orbb, тут все зависит от подхода к реализации. Лучше задавать начальное состояние. Пустой массив, пустой объект, строку, ноль и тд. в зависимости от типа данных.

[Orbb]

Антон Спирин, ок, понял, спасибо за ответ