问题遇到的现象和发生背景
用的是react 类组件
我想在添加多列空值的数组里进行搜索操作,把对应的数据渲染到搜索的那一列,其他空白列位置不变,但是我在操作的时候不管在中间那个位置都会在最后一个添加,原因是因为我在while循环的时候 index--,最后一项已经满足我给的条件所以直接给我渲染到不应该出现的最后一列
问题相关代码,请勿粘贴截图
数组
['A000001', 'X000051', 'W000166', 'K000007', 'W000071', 'D000143', '', '', '', '', '']
代码
//主页面
{afterArr.map((item) => {
return (
<SearchBar
key={item}
newList={subjectContrastList}
institutionCode={item?.institutionCode || ''}
/>
);
})}
//SearchBar组件
// 点击当前项
getNewListIndex = (arr, obj) => {
let r = arr?.length;
while (r--) {
if (arr[r] === obj) {
return r;
}
}
return r;
};
onChange = (e) => {
const {institutionCode, newList} = this.props;
const changeList= JSON.parse(JSON.stringify(newList));
const p = this.getNewListIndex(changeList, institutionCode);
changeList[p] = e || '';
}
运行结果及报错内容
打印结果是在数组最后一项添加
['A000001', 'X000051', 'W000166', 'K000007', 'W000071', 'D000143', '', '', '', '', 'S001231']
我的解答思路和尝试过的方法
我想要达到的结果
我想在点击空白列搜索的时候获取到这个点击项的下标,搜索成功后的数组变成下面这样
['A000001', 'X000051', 'W000166', 'K000007', 'W000071', 'D000143', '', '', 'S001231', '', '']