我从什么开始

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


原因:

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


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


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

最佳答案

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

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

10-07 19:10
查看更多