humiliation
@humiliation
Чем больше знаю - тем больше дурак

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

Подскажите, у меня компонент получает данные вот таким образом
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]?

п.с. не жс программист
  • Вопрос задан
  • 48 просмотров
Решения вопроса 1
rockon404
@rockon404 Куратор тега React
Frontend Developer
Не ясно зачем передавать в 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>;
};
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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