编辑文本区域返回无法读取未定义的属性

Question

我正在创建一个网格，当用户单击详细信息行(加号(时，会弹出一个文本区域，他可以在其中键入。目前，当用户在文本区域键入内容时，我会收到以下错误：

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'));

这里是一个可重复的例子：https://stackblitz.com/edit/react-k6glrs?file=app%2Fmain.tsx

Answer 1

不要使用onChange 中的道具

从onChange 中移除道具

onChange={(e) =>
props.editDetailItem(dataItem, e.value, 'UnitsInStock')
}