从数组反应钩子中删除项目无法正常工作

Question

从数组中删除项目仅适用于最后一个呈现的项目，但已选择的项目从列表中删除

const [otherPhones, setOtherPhones] = useState([]);
{otherPhones.map((item, i) => {
return (
<View
style={{
...DefaultStyles.iconContainer,
marginBottom: hp("1.25%")
}}
key={i}
>
<PhoneNumberPicker
placeholder={i18n.t("other_phone")}
style={{ flex: 10 }}
countryHint={countryHint}
onChange={value => {
_handleOtherPhone(value, i);
}}
/>
<IconButton
style={{ flex: 1 }}
icon="trash-can-outline"
color={SECONDARY}
size={SCALE_20}
onPress={_deleteOtherPhone.bind(this, i)}
/>
</View>
);
})}
const _deleteOtherPhone = index => {
const temp = [...otherPhones];
temp.splice(index, 1);
setOtherPhones(temp);
};

当我删除电话号码选择器并仅显示简单的属性项时，一切正常。 PhoneNumberPicker 它是一个带有一些附加组件的文本输入。

Answer 1

也许这会对某人有所帮助，我使用 useRef(( 反应钩子来引用 DOM 上每个渲染的孩子，然后我使用删除项目后用新索引更新它们(删除所选元素后(。

父元素 ：

const elRefs = useRef([]);
if (elRefs.current.length !== otherPhones.length) {
// add or remove refs
elRefs.current = Array(otherPhones.length)
.fill()
.map((_, i) => elRefs.current[i] || createRef());
}
...
const _deleteOtherPhone = index => {
const temp = [...otherPhones];
temp.splice(index, 1);
for (let i = 0; i < temp.length; i++) {
const element = temp[i];
elRefs.current[i].current.removeItem(element);
}
...
}
...
<PhoneNumberPicker
placeholder={i18n.t("other_phone")}
style={{ flex: 10 }}
ref={elRefs.current[i]}
countryHint={countryHint}
onChange={value => {
_handleOtherPhone(value, i);
}}
/>
...

子元素电话号码选择器： 更新电话号码 ：

removeItem(item) {
this.setState({ phoneNo: item.phoneNumber });
}