React+Redux+KendoUI应用中DatePicker字符串值无效错误修复求助

Alright, let's tackle this issue head-on. The error you're seeing happens because your CreatedDate field from the API is coming in as a string, but the Kendo React DatePicker component expects a Date object when in edit mode. Your previous attempts with defaultValue={null} and format={null} don't address the root problem—they just tweak default rendering, not the actual data type being passed to the editor.

Here are the concrete fixes you need to implement:

1. Convert Date Strings to Date Objects When Fetching Data #

The first step is to ensure your grid's data source has actual Date instances for the CreatedDate field. Modify the fetchData method in your ContactComponent to transform the string values from your API:

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 }) => {
      // Transform CreatedDate from string to Date object
      const transformedData = Data.map(item => ({
        ...item,
        CreatedDate: item.CreatedDate ? new Date(item.CreatedDate) : null
      }));
      this.setState({ 
        result: hasGroups ? translateDataSourceResultGroups(transformedData) : transformedData, 
        total, 
        dataState 
      });
    });
};

2. Fix a Bug in itemChange (Row Update Logic) #

In your itemChange method's default case, you're using d.id (lowercase) to find the row index, but your field is named Id (uppercase). This would prevent updates from working correctly. Also, add a safeguard to ensure date values stay as Date objects if needed:

default:
  const data = this.state.result.slice();
  // Fix: Use uppercase Id to match your field name
  const index = data.findIndex(d => d.Id === event.dataItem.Id);
  let updatedValue = event.value;
  
  // Optional: Ensure date fields remain Date objects (Kendo DatePicker usually returns this already)
  if (event.field === "CreatedDate" && typeof updatedValue === "string") {
    updatedValue = new Date(updatedValue);
  }
  
  data[index] = { ...data[index], [event.field]: updatedValue };
  this.setState({ result: data });

3. Clean Up Your Grid Column Definition #

Remove the ineffective defaultValue={null} from your CreatedDate column—since we're already setting null in the data transformation, this is redundant. Keep the format for display:

<GridColumn field="CreatedDate" title="Created Date" editor="date" format="{0:d}" />

Why This Works #

• When your grid loads data, every CreatedDate is now a proper Date object, so when you enter edit mode, the DatePicker receives the correct prop type.
• The fix to the findIndex ensures that row updates actually target the correct record, which was a hidden bug that might have caused other issues down the line.

If you run into date parsing issues (e.g., if your API returns a non-standard date format), you can use a library like date-fns or moment.js to parse the string into a Date object more reliably. For example:

// Using date-fns
import { parseISO } from 'date-fns';
CreatedDate: item.CreatedDate ? parseISO(item.CreatedDate) : null

内容的提问来源于stack exchange，提问作者Yanayaya