使用responseData索引和长度动态更改按钮-React自动完成

Question

执行搜索操作时，我的页面会列出不同的项目编号，旁边会有"删除"按钮。默认情况下，列表的最后一行会启用自动完成框，以便使用"添加"按钮而不是"删除"键添加新项目(项目编号(。如果使用该行添加了新项目，则按钮会自动更改为"删除"，并使用"添加"按钮在下面再次添加新行。

render(){
const currentItem = Object.values(this.state.currentItem);
const CurrentItemToRender = this.state.currentItem.filter((ca) => ca.item);
const numRows = CurrentItemToRender.length;

将自动完成下拉列表中的选定项目设置为状态。如果值为null，我尝试将numRows增加1，因为这可以解决我的问题，但在渲染时没有得到反映(请参阅上面的render((代码(。

onChangeCaptureItem = i => (event, value) => {     
let CurrentItemToRender = this.state.currentItem.filter((ca) => ca. itemNo);
let numRows = CurrentItemToRender.length;
let currentItem = [...this.state.currentItem];
if (value === null) {
numRows = numRows + 1     
}
else {
currentItem[i].itemNo = value;
}
this.setState({ currentItem });
}

返回itemNumbers列表的方法

searchItem() {
getItem(this.state.currentItem [0].parentItemNo).then(
(response) => {
if (response.ok) {
response.json()
.then((responseData) => {
let lengthOfResponse = Object.keys(responseData).length
this.removeAllFields(0); 
for (var i = 0; i < lengthOfResponse; i++) {
this.addFormFields();
let currentItem = [...this.state.currentItem];
currentItem[i].itemNo = responseData[i];
if (this.state.currentItem[i].itemNo == this.state.currentItem[i].parentItemNo) {
this.removeRow(i); 
}
this.setState({ currentItem });
this.setState({ searchMode: true });
this.setState({ addRow: true })
}
this.addFormFields(); // adds the last row with Add button
})
}

Answer 1

这是key出现的问题。您正在使用索引作为密钥。这不是一个好方法。请改用任何唯一标识符。你可以在这里阅读更多

你可以做一些类似的事情

<div className="form-inline" key={index+element.itemNo}>

假设element.itemNo是唯一标识符