在React Native中，使用嵌套的tenary运算符会带来数组比较的意外结果

Question

我一直在react原生项目中制作测试组件。我的目标是建立如下屏幕截图所示。

https://i.stack.imgur.com/khrDO.png

我面临的一个问题是，当选择了正确的答案时，其他已经选择的选项会和答案一样被激活。

我希望在选择正确答案后，像上面的屏幕截图一样，保留所选的错误答案。

以下是与该问题相关的代码。

const Quiz: React.FC<QuizProps> = ({
options,
correctAnswerIndex
}) => {
const [accSelectedOptionIdx, setAccSelectedOptionIdx] = useState<number[]>([]);
const isCorrectAnswer = (
selectedOption: number[],
correctAnswer: number[] | undefined
) => {
const matchCorrectIdxNumber = selectedOption.filter((ele) =>
correctAnswer?.includes(ele)
);
return matchCorrectIdxNumber.length === correctAnswer?.length;
};
const onPress = (idx: number) => {
if (!user) {
history.push('/login', {
from: pathname,
});
} else {
setAccSelectedOptionIdx((prev) => [...prev, idx]);
}
};
const isOptAlreadySelected = (idx: number) => {
const result = accSelectedOptionIndex.includes(idx);
return result;
};

return (
<View>
{options?.map((option, idx) => {
return (
<>
<TouchableOpacity
onPress={onPress(idx));
disabled={isCorrectAnswer(accSelectedOptionIndex, correctAnswerIndex)}
key={option}
style={{
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
}}
>
<Text
selectable
style={
isOptAlreadySelected(idx)
? // if an option being mapped over was already selected
isCorrectAnswer(accSelectedOptionIndex, correctAnswerIndex)
? // if the option that was already selected is correct answer, then apply correct type style to it
[styles.defaultOptionTxt, styles.correctAnswerTxt]
: // if it's incorrect answer, apply incorrect type style
[styles.defaultOptionTxt, styles.wrongAnswerTxt]
: // if an option is not selected yet, apply default style
styles.defaultOptionTxt
}
>
{option}
</Text>
(...omitted)
))}

代码段中的数据类型"correctIndexes"是服务器给定的数字数组
ex(correctIndexes=[1]

我遇到这个问题的方法是比较一个包含用户选择累积的索引的数组和correctAnswerIndex，这样我就可以检查数组中是否有correctAnwerIndex编号

然而，当选择了正确的答案时，我描述的错误就会发生，因为数组"accSelectedOptionIndex"同时具有正确的AnswerIndex，这会导致更改贯穿选项。

如有任何建议，我们将不胜感激
谢谢

Answer 1

要解决此问题，单击由isCorrectAnswer(accSelectedOptionIndex, correctAnswerIndex) ? [styles.defaultOptionTxt, styles.correctAnswerTxt] : [styles.defaultOptionTxt, styles.wrongAnswerTxt]引起的答案选项不应影响以前选择的错误选项

因此，通过比较两个数组和整个选项的索引，可以定义所有三种情况的状态，如正确、错误、默认或尚未，这样用户每次单击一个选项时，它都会有我们定义的自己的状态，而不会影响任何其他选项。

{options?.map((option, idx) => {
const status = _.includes(accSelectedOptionIdx, idx)
? _.includes(correctIndexes, idx)
? 'correct'
: 'wrong'
: 'yet';
return (
<>
<TouchableOpacity
onPress={onPress(idx));
disabled={isCorrectAnswer(accSelectedOptionIndex, correctAnswerIndex)}
key={option}
style={{
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
}}
>
<Text
selectable
style={
styles.defaultOptionTxt,
status === 'correct'
? styles.correctAnswerTxt
: status === 'wrong'
? styles.wrongAnswerTxt
: {},
]}
>
{option}
</Text>
(...omitted)
))}