我目前正在使用Telerik的Kendo React UI来开发ASP.NET Core的React with REdux应用程序。我正在使用他们的网格小部件，在您尝试编辑其中一行之前，它似乎工作正常。尝试编辑行时，出现以下错误：
警告：道具类型失败：
value类型的道具String无效 提供给DatePicker的预期实例Date。 在DatePicker中
我搜索了这个问题的答案，发现了两种可能。
defaultValue设置为null无效。 null，即format={null}，但这也不起作用。这是我的代码。
ContactContainer
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;
ContactComponent
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
});
});
};
}
}
CommandCell
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>
);
}
}
有人可以帮助我解决此问题或解决方法吗？
答案 0 :(得分：0)
我认为问题在于，您分配了defaultValue={null}来发出警告。尝试在defaultValue
<GridColumn field="CreatedDate" title="Created Date" editor="date" format="{0:d}" defaultValue={new Date()} />