如何从数组中删除不必要的行而不会出错 - 无法读取未定义的属性(读取"label")？

Question

删除行图像

我需要从我的optionsThree数组中删除最后一行，这样我就只能从optionsThree中显示一个元素。但是，如果我删除了不必要的元素，并且只留下一个元素，那么我就会得到这个错误——"；无法读取未定义(读取"标签"("的属性；在添加第二个for循环后，我遇到了一个错误-遇到了两个使用相同密钥的孩子也许有一个更好的结构来制作图片中的布局？

const rows: JSX.Element[] = [];
for (let i = 0; i < options.length; i += 1) {
const option1 = options[i];
const option2 = optionsTwo[i];
rows.push(
<View key={i}>
<View style={{ flexDirection: "row" }}>
<Radio
onPress={() => onChange(option1.value)}
label={option1.label}
checked={option1.value === value}
style={{ flex: 1 }}
/>
<Radio
onPress={() => onChange(option2.value)}
label={option2.label}
checked={option2.value === value}
style={{ flex: 1}}
/>
</View>
</View>
);
}
for (let i = 0; i < options.length; i += 1) {
const option3 = optionsThree[i];
rows.push(
<View key={i}>
<View style={{ flexDirection: "row" }}>
<Radio
onPress={() => onChange(option3.value)}
label={option3.label}
checked={option3.value === value}
style={{ flex: 1 }}
/>
<View style={{ flex: 1}} />
</View>
</View>
);
}
return (
<View>
<View>{rows}</View>
</View>
);
}

我的选项阵列

options={[
{ label: "label", value: "value" },
{ label: "label", value: "value3" },
]}
optionsTwo={[
{ label: "label", value: "value2" },
{ label: "label", value: "value4" },
{ label: "label", value: "value7" },
]}
optionsThree={[
{ label: "label", value: "value11" },
{ label: "label", value: "value12" },//should delete this
]}

Answer 1

所以问题是因为您使用options.length来迭代optionsThree，它应该类似于

for (let i = 0; i < optionsThree.length; i += 1)

但这也是第一个循环中的一个问题，因为它没有考虑optionsTwo的最后一个项目，并且，如果options的项目比optionsTwo的项目多，您将再次得到相同的错误。