Question

我从何开始

我有一个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>
        )
    }
}

原因：

正如我所说，我什至还没有将数据链接到表，所以为什么这会发生吗？

PS：ESLint不会引发任何编译错误。

Answer 1

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

您将必须逐段调试，但是我认为错误消息包含fetchPickingScans引起问题的线索。异步恒星/收益率看起来可能是问题所在，但我不确定。

Answer 2

我通过对软件包进行常规更新并根据npm outdated进行清理来解决此问题，并确保仅使用@material-ui/core（而不是material-ui）并且一切正常。

npm outdated

添加material-ui / core / Table会导致数据异常，即使尚未链接也是如此

2 个答案: