我从什么开始
我有一个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不会引发任何编译错误。
最佳答案
我会隔离fetchPickingScans
并用一个总是返回相同列表的函数替换它,甚至不尝试从其他任何地方获取数据。
您将必须逐段调试,但是我认为错误消息包含fetchPickingScans
引起问题的线索。异步星形/屈服看起来可能是问题所在,但我不确定。