问编辑textarea返回无法读取未定义属性

EN

Cannot read properties of undefined

import React, { useState } from 'react';
import * as ReactDOM from 'react-dom';
import {
  Grid,
  GridColumn as Column,
  GridDetailRowProps,
  GridExpandChangeEvent,
} from '@progress/kendo-react-grid';
import { TextArea } from '@progress/kendo-react-inputs';

import products from './products.json';
import { Product } from './interfaces';

const DetailComponent = (props: GridDetailRowProps) => {
  const dataItem = props.dataItem;

  return (
    <section>
      <p>
        <strong>In Stock:</strong>{' '}
        <TextArea
          value={dataItem.UnitsInStock}
          onChange={(e, props) =>
            props.editDetailItem(dataItem, e.value, 'UnitsInStock')
          }
        />
      </p>
      <p>
        <strong>On Order:</strong>{' '}
        <TextArea
          value={dataItem.UnitsOnOrder}
          onChange={(e, props) =>
            props.editDetailItem(dataItem, e.value, 'UnitsOnOrder')
          }
        />
      </p>
    </section>
  );
};

const App = () => {
  const [data, setData] = React.useState<Array<Product>>(products.slice(0));
  const [rerender, setRerender] = useState(false);

  const expandChange = (event) => {
    event.dataItem.expanded = !event.dataItem.expanded;
    setRerender(!rerender);
  };

  const editDetailItem = (updatedItem, value, field) => {
    // let newData = this.state.data.map((item) => {
    //   if (updatedItem.ProductID === item.ProductID) {
    //     item[field] = value;
    //   }
    //   return item;
    // });
    // this.setState({
    //   data: newData,
    // });
    let newData = data.map((item) => {
      if (updatedItem.ProductID === item.ProductID) {
        item[field] = value;
      }
      return item;
    });
    setData(newData);
  };

  const MyDetailComponent = (props) => (
    <DetailComponent {...props} editDetailItem={editDetailItem} />
  );

  return (
    <Grid
      data={data}
      detail={MyDetailComponent}
      style={{ height: '400px' }}
      expandField="expanded"
      onExpandChange={expandChange}
    >
      <Column field="ProductName" title="Product" width="300px" />
      <Column field="ProductID" title="ID" width="50px" />
      <Column field="UnitPrice" title="Unit Price" width="100px" />
      <Column field="QuantityPerUnit" title="Qty Per Unit" />
    </Grid>
  );
};
ReactDOM.render(<App />, document.querySelector('my-app'));