添加 material-ui/core/Table 会导致数据异常，即使它甚至还没有链接

Question

我从什么开始

我有一个加载我的（模拟）API 数据的 Redux Saga 生成器函数：

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 因为它的 table 功能：

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

出于某种原因，实际上即使添加一个空的 table 结构也会导致数据异常：

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>
        )
    }
}

原因：

As I said, I'm not even linking the data to the table yet, so why would this happen?

PS: ESLint 不会抛出任何编译错误。

Answer 1

我会隔离 fetchPickingScans 并可能用一个始终 returns 相同列表并且甚至不尝试从其他任何地方获取数据的函数替换它。

您将不得不逐个调试，但我认为错误消息包含 fetchPickingScans 导致问题的线索。异步 star/yield 看起来可能是问题所在，但我不确定。

Answer 2

我通过基于 npm outdated 进行一般包更新和清理来修复它，确保我只使用 @material-ui/core（而不是 material-ui）并且一切正常。

npm outdated

添加 material-ui/core/Table 会导致数据异常，即使它甚至还没有链接

Adding material-ui/core/Table causes a data exception even though it's not even linked yet

javascript

reactjs

redux

material-ui

redux-saga