Question

我正在使用当前项目中的休息管理员并面临问题，以便在listView中显示结果。

所以目前我正在使用create form上传一个csv文件，并使用action和reducer将api的响应存储在状态中，action和reducer将响应创建为全局状态。来自状态的数据被馈送到道具，从那里它可以在Datagrid中显示。数据进入列表但随后列表在其余客户端中搜索GET_LIST方法时消失。

请建议如何克服这个问题！提前致谢！：）

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import FlatButton from 'material-ui/FlatButton';
import { fetchUtils } from 'admin-on-rest';
import { csvFailedRecords  as csvFailedRecordsAction } from '../customActions/csvFailedRecords'
import { showNotification as showNotificationAction } from 'admin-on-rest';
import { push as pushAction } from 'react-router-redux';
import {CREATE} from 'admin-on-rest'
import restClient from '../../App'

class UploadButton extends Component {
    handleClick = () => {
        const { csvFailedRecords, record, push, basePath} = this.props
        let csvform = new FormData()
        if (record && record.length) {
            csvform.append('csvFile', record[0].rawFile);
        }
        // csvFailedRecords(record[0].rawFile)
        // restClient(CREATE, 'uploadCsv', { data: csvform})
        return fetchUtils.fetchJson(`http://localhost:3001/uploadCsv`, { method: "POST", body: csvform })
            .then(failedRecords => {
                console.log('failedRecords: ', failedRecords.json);
                csvFailedRecords(failedRecords.json)
                // showNotification(' Failed Records fetched');
                push('/upload')
            })
    }
    render() {
        console.log();
        return (<FlatButton label='Approve' onClick={this.handleClick} />)
    }
}

UploadButton.propTypes = {
    csvFailedRecords: PropTypes.func,
    record: PropTypes.object,
    showNotification: PropTypes.func,
    push: PropTypes.func, 
    basePath: PropTypes.string
}

function mapStateToProps(state, props) {
    console.log('state67890: ', state);
    return {
        record: state.form["record-form"].values.csvStorage
    };
  }

export default connect(mapStateToProps, {
    csvFailedRecords: csvFailedRecordsAction,
    showNotification: showNotificationAction,
    push: pushAction,
})(UploadButton)





import React,{Component} from 'react'
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { Datagrid, TextField, List,Show} from 'admin-on-rest'

class UploadDatagrid extends Component{
    constructor(props){
        super(props);
    }

    shouldComponentUpdate(nextProps, nextState){
        console.log('nextState: ', nextState);
        console.log(' this  state: ', this.props);
        console.log('nextProps: ', nextProps);
        return (nextProps, this.props);
    }
    render(){
        const { record, basePath, ids, data } = this.props
        console.log('data890000000: ', record);
        return(
            <Datagrid data={data} currentSort={{ field: 'tale_id', order: 'DESC' }} ids={ids}>
                <TextField source="tale_id" label="Id" />
            </Datagrid>
        )
    }
}


UploadDatagrid.propTypes = {
    record: PropTypes.object, 
    basePath: PropTypes.string,
    ids: PropTypes.array,
    obj: PropTypes.object
}

function mapStateToProps(state, props) {
    console.log('record78900000000: ',state.data.data.data);
    let sampleRecord = state.data.data.data
    const ids = sampleRecord.map(resp => parseInt(resp.tale_id))

    let data = {}
    sampleRecord.forEach(res => {
    data[parseInt(res.tale_id)] = res
    })
    return {
        record:state.data.data.data,
        ids,
        data
    }
}

export default connect(mapStateToProps)(UploadDatagrid)

Admin on rest在List中显示状态数据

0 个答案: