reactjs - 如何在我的 React with Redux 和 KendoUI Web 应用程序中修复 DatePicker Invalid prop value of type string 错误？

问题描述

我目前正在使用 Telerik 的 Kendo React UI 为 ASP.NET Core 开发我的 React with REdux 应用程序。我正在使用他们的网格小部件，在您尝试编辑其中一行之前，它似乎工作正常。当您尝试编辑一行时，您会收到以下错误：

警告：道具类型失败：提供给value的道具类型无效，预期实例为。在日期选择器中StringDatePickerDate

我搜索了这个问题的答案，发现了几种可能性。

第一个是设置默认值defaultValue不起作用null。
第二个答案建议将格式设置为nullieformat={null}但这也不起作用。

这是我的代码。

联系人容器

import * as React from 'react';
import { GridColumn, Grid } from '@progress/kendo-react-grid';
import { withState } from './ContactComponent';
import { CommandCell } from './CommandCell';

const ContactsGrid = withState(Grid);

class ContactContainer extends React.Component {    
    render() {
        return (
            <div>                
                <ContactsGrid
                    sortlable
                    pageable
                    pageSize={10}
                    editField="inEdit">
                    <GridColumn field="Id" title="Id" editable={false} width={100} />
                    <GridColumn field="FirstName" title="First Name" />
                    <GridColumn field="LastName" title="Last Name" />
                    <GridColumn field="Email" title="Email" />
                    <GridColumn field="CreatedUser" title="Created By" />
                    <GridColumn field="CreatedDate" title="Created Date" editor="date" format="{0:d}" defaultValue={null} />
                    <GridColumn
                        groupable={false}
                        sortable={false}
                        filterable={false}
                        resizable={false}
                        field="_command"
                        title=" "
                        width="180px"
                        cell={CommandCell}
                    />
                </ContactsGrid>
            </div>
        );
    }
}
export default ContactContainer;

联系组件

import React from 'react';
import { toDataSourceRequestString, translateDataSourceResultGroups } from '@progress/kendo-data-query';
import { Grid, GridToolbar } from '@progress/kendo-react-grid';
import AddIcon from '@material-ui/icons/Add';
import Fab from '@material-ui/core/Fab';

export function withState() {
    return class StatefullGrid extends React.Component {
        constructor(props) {
            super(props);
            if (props.pageable === false) {
                this.state = {};
            } else {
                this.state = {
                    dataState: {
                        skip: 0,
                        take: 20
                    }
                };
            }            
        }
        render() {
            return (
                <Grid
                    editField="_command"
                    {...this.props}
                    {...this.state.dataState}
                    total={this.state.total}
                    data={this.state.result}
                    onItemChange={this.itemChange}
                    onDataStateChange={this.onDataStateChange}>
                    <GridToolbar>
                        <Fab size="small" color="secondary" aria-label="Add" onClick={this.addContact}>
                            <AddIcon />
                        </Fab>
                    </GridToolbar>                    
                    {this.props.children}
                </Grid>
            );
        }

        componentDidMount() {
            this.fetchData(this.state.dataState);
        }       

        addContact = () => {
            const data = this.state.result;            
            data.unshift({ "_command": true, inEdit: true });
            this.setState({
                result: data
            })
        };
        enterEdit = (item) => {
            this.itemInEdit = Object.assign(item, {});
            item.inEdit = true;
            this.forceUpdate();
        };
        cancelEdit = (item) => {
            let data = this.state.result
            let mappedData = data.map(record => {
                if (record.Id === this.itemInEdit.Id) {
                    record = this.itemInEdit;
                    record.inEdit = false
                }
                return record
            })
            this.setState({
                result: mappedData
            })
        };

        handleDataStateChange = (changeEvent) => {
            this.setState({ dataState: changeEvent.Data });
            this.fetchData(changeEvent.data);
        };
        onDataStateChange = (changeEvent) => {
            this.setState({ dataState: changeEvent.Data });
            this.fetchData(changeEvent.Data);
        };
        serialize = (obj) => {
            var str = [];
            for (var p in obj)
                if (obj.hasOwnProperty(p)) {
                    str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
                }
            return str.join("&");
        };
        itemChange = (event) => {
            switch (event.value) {
                case "edit":
                    this.enterEdit(event.dataItem)
                    break;
                case "delete":
                    this.deleteItem(event.dataItem)
                    break;
                case "update":
                    if (event.dataItem.Id) {
                        this.updateItem(event.dataItem)
                    } else {
                        this.addContact(event.dataItem)
                    }
                    break;
                case "cancel":
                    this.cancelEdit(event.dataItem)
                    break;
                default:
                    const data = this.state.result.slice();
                    const index = data.findIndex(d => d.id === event.dataItem.id);
                    data[index] = { ...data[index], [event.field]: event.value };
                    this.setState({
                        result: data
                    });
            }

        };
        fetchData(dataState) {
            const queryStr = `${toDataSourceRequestString(dataState)}`;
            const hasGroups = dataState.group && dataState.group.length;
            const base_url = 'api/Contact/GetContacts';
            const init = { method: 'GET', accept: 'application/json', headers: {} };

            fetch(`${base_url}?${queryStr}`, init)
                .then(response => response.json())
                .then(({ Data, total }) => {
                    this.setState({
                        result: hasGroups ? translateDataSourceResultGroups(Data) : Data,
                        total,
                        dataState
                    });
                });
        };
    }
}

命令单元

import React from 'react';
import { GridCell } from '@progress/kendo-react-grid';
import IconButton from '@material-ui/core/IconButton';
import Fab from '@material-ui/core/Fab';
import EditIcon from '@material-ui/icons/Edit';
import DeleteIcon from '@material-ui/icons/Delete';
import DoneIcon from '@material-ui/icons/Done';
import CloseIcon from '@material-ui/icons/Close';

export class CommandCell extends GridCell {
    buttonClick = (e, command) => {
        this.props.onChange({ dataItem: this.props.dataItem, e, field: this.props.field, value: command });

    }
    render() {
        if (this.props.rowType !== "data") {
            return null;
        }

        if (this.props.dataItem.inEdit) {
            return (
                <td>
                    <IconButton color="secondary" className="k-grid-save-command"
                        onClick={(e) => this.buttonClick(e, "update")}>
                        <DoneIcon />
                    </IconButton>
                    <IconButton color="inherit" className="k-grid-cancel-command"
                        onClick={(e) => this.buttonClick(e, "cancel")}>
                        <CloseIcon />
                    </IconButton>
                </td>
            );
        }

        return (
            <td>
                <Fab color="secondary" aria-label="Edit" className="k-grid-edit-command" onClick={(e) => this.buttonClick(e, "edit")}>
                    <EditIcon />
                </Fab>
                <Fab color="secondary" aria-label="Delete" className="k-grid-remove-command" onClick={(e) => window.confirm('Confirm deleting: ' + this.props.dataItem.Name) && this.buttonClick(e, "delete")}>
                    <DeleteIcon />
                </Fab>
            </td>
        );
    }
}

谁能帮我解决这个问题或解决方法？

标签： reactjsasp.net-corereduxkendo-ui

reactjs - 如何在我的 React with Redux 和 KendoUI Web 应用程序中修复 DatePicker Invalid prop value of type string 错误？

问题描述

解决方案

推荐阅读