Добавление material-ui / core / Table вызывает исключение данных, даже если оно еще не связано - PullRequest
Новая
       22

Добавление material-ui / core / Table вызывает исключение данных, даже если оно еще не связано

0 голосов
/ 14 декабря 2018

С чего я начал

У меня есть функция генератора Redux Saga, которая загружает мои (ложные) данные API: 

function* fetchPickingScans({orderReference}){
    try{
        const response = yield call( scanningMockApi.getPickingScans, orderReference);

        if (response !== undefined && response.scannedItems !== undefined){
            const scans = response.scannedItems;
            yield put(loadPickingScansSuccess(scans));
        }
    }
    catch (error){
        console.warn(error);
    }
}

Эти данные передаются втупой компонент: 

<div>
    <ScansOverview scans={pickingScans}/>
</div>

Пока я настраивал, я продолжал отображать данные просто, просто неструктурированные настройки: 

const ScansOverview = ({scans, classes}) => {
    var scansArray = Object.values(scans); // ToArray
    if (scansArray[0] === undefined){
        return (
            <div className={classes.root}>Please wait.</div>
        )
    }else{
        return (
            <div className={classes.root}>
                {
                    scansArray.map(scanItem => {
                        return (
                            <div key={scanItem.id}>
                                <ScanLine scan={scanItem}/>
                            </div>
                        )
                    })
                }
            </div>
        )
    }
}

Технически это работает нормально, пока я не попробуюдобавить material-ui/core/Table структуру.

Обновление по запросу

Фактический код страницы, который все настраивает: 

import React, { Component } from 'react';
import { connect } from 'react-redux';
import ScansOverview from './scansOverview';
import { loadPickingScans } from '../../actions';
import { pickingScansForOrderReference } from '../../selectors';

class OrderPickingScansPage extends Component {
    componentDidMount(){
        const { loadPickingScans } = this.props;
        loadPickingScans(this.props.match.params.orderReference);
    }

    render() {
        const {pickingScans} = this.props;

        return (
            <div>
                <ScansOverview scans={pickingScans}/>
            </div>
        );
    }
}

const mapStateToProps = state => {
    const getPickingScansForOrderReference = pickingScansForOrderReference();
    return {
      pickingScans: getPickingScansForOrderReference(state)
    };
}

function mapDispatchToProps(dispatch) {
    return {
        loadPickingScans: () => dispatch(loadPickingScans())
    };
}

export default connect(mapStateToProps, mapDispatchToProps)(OrderPickingScansPage);

То, что я собираюсь

Как упомянуто выше, данные отображают, доказывая, что установка работает, но способом, который еще не является функционально желательным.Мне нужно добавить структуру на страницу.

Поэтому я добавил material-ui/core для ее функциональности таблицы: 

import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';

По какой-то причине даже добавление пустой структуры таблицы приводит к исключению данных: 

const ScansOverview = ({scans, classes}) => {
    var scansArray = Object.values(scans); // ToArray
    if (scansArray[0] === undefined){
        return (
            <div className={classes.root}>Please wait.</div>
        )
    }else{
        return (
            <div className={classes.root}>
                <Table>
                    <TableBody>
                        <TableRow>
                            <TableCell>Test</TableCell>
                        </TableRow>
                    </TableBody>
                </Table>
            </div>
        )
    }
}

Причины:

enter image description here

Как я уже сказал, я даже не связываю данные стаблицы еще, так почему бы это случилось?

PS: ESLint не выдает никаких ошибок компиляции.

Ответы [ 2 ]

0 голосов
/ 18 декабря 2018

Я исправил это, выполнив общее обновление пакета и очистив его на основе npm outdated, убедившись, что я использую только @material-ui/core (не material-ui), и все работает.

npm устарел

0 голосов
/ 17 декабря 2018

Я бы изолировал fetchPickingScans и, возможно, заменил бы его функцией, которая всегда возвращает один и тот же список и даже не пытается извлечь данные из другого места.

Вам придется отлаживать этот фрагментпо частям, но я думаю, что сообщение об ошибке содержит подсказку, что fetchPickingScans вызывает проблему.Асинхронная звезда / выход выглядит так, как будто они могут быть проблемой, но я не уверен.

...